Using your own Images / Audio

Home Forums Procoding Using your own Images / Audio

This topic contains 8 replies, has 1 voice, and was last updated by  chris 6 years, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #597


    Can you use your own Audio and images in a sketch?
    Currently I can only get audio and images to work from http sources on the net.
    (A .js example of this method for mp3s by Michael is included below)
    There is also an image loader included with the shipped examples – it uses an http soursed file.

    Quote from Michael on using resources from your own device:
    “You can also experiment with playing local files from “../../Documents/yourfilename.mp3″, though this is undocumented, because it doesn’t always work as expected – and sometimes not at all. It might work if you do it in JS like adding the audio in the example via injecting an audio-element. But esp. preloading with the processingjs @preload directive has some problems with local files.”

    I can’t get this local path to work with images or mp3s.. Anyone had any luck?

    Audio example follows:

    // HTML5 Sound Example
    // by Michael Markert for PR0C0D1N6
    // v 1.0 2012/06/30

    //var canvas; // already defined in PR0C0D1N6!
    var ctx;
    var soundsrc = “”;
    var audio; // audio element

    var r, g, b;

    // misc methods
    function random(max) {
    return Math.floor(Math.random()*max);

    // convenience drawing methods
    function clear() {
    r = random(255);
    g = random(255);
    b = random(255);
    ctx.fillStyle = “rgb(“+r+”,”+g+”,”+b+”)”;
    ctx.fillRect(0, 0, width, height);

    // drawing routine
    function draw() {
    // update size if necessary
    if(width != canvas.width) {
    width = canvas.width;
    height = canvas.height;
    ctx.fillStyle = “rgba(255,255,255,0.4)”;
    ctx.font = “75px Helvetica”;
    ctx.textAlign = “center”;
    ctx.fillText(“Tap & wait…” , width/2, height/2, width);

    // Event Handlers
    function playing(e) {
    function start(e) {
    /* no volume control on iOS :(
    var pos = e.touches[0].pageY;
    var v = 1 / height * pos;
    v = 1 + (v * -1);
    audio.volume = v; */;

    function pause(e) {

    // init
    function init() {
    // get context
    ctx = canvas.getContext(“2d”);

    // load sound
    //console.log(“loading ” + soundsrc + “…”);
    audio = document.createElement(“audio”); = “sound”;
    audio.src = soundsrc;
    audio = document.body.appendChild(audio);

    // setup evenevents
    audio.addEventListener(‘playing’, playing, false);
    canvas.addEventListener(‘touchstart’, start, true);
    canvas.addEventListener(‘touchend’, pause, true);

    // setup drawing routine
    //setInterval(draw, interval);

    // call init once



    Hi Chris,

    sorry for the wrong info, the relative path to the document folder should be “../../../Documents/yourfilename.mp3″ and not “../../Documents/yourfilename.mp3″

    But then again, this is just a “hacky” temporary solution until the resourceManager has been added to the upcoming version.




    This path did not work for me, maybe others will have more luck?



    ah well… there’s a reason why this is just an unofficial hacky :-)
    though in theory this one should really work (var soundsrc = “../../../sound.mp3”;) ?

    Obviously, the file has to be in the Documents folder and you should double check that the name is spelled right.
    Also, you should name the file without spaces and special chars. And you should make sure, that the file can be played back on iOS (not an .ogg or something). For testing purposes it would probably also help if the file was very small.

    However, don’t put too much energy on getting this to work, because I’m really working hard on the resource Manager and the new document file structure: once the next version is out, all relative paths will be different :-)
    (though it’s very unlikely that the update is already available within the next 1 or 2 months).




    Any news of the update yet?



    Hi Chris,

    while the previous (and the upcoming) updates are all based on the current branch, I already started coding the next major version. As there are a couple of complex features and things going on (besides the resource manager), this takes a lot of time and lots of testing. Additionally, I may be extremely busy the upcoming months, so I really can’t say when it’s done. Or in other words: it’s done when it’s done :)

    (sometimes coding is really fast and I manage to create a lot new cool features in a couple of days and then there are times, where I’m hitting barriers and restrictions and need months to get very little visible results. That’s coding for iOS :)

    I’ll keep you updated.
    Thanks for your patience.




    Hi Micheal,
    Is there any news on the development of Procoding?
    I checked out Codea, but what it lacks is the ability to port quickly from desktop to idevice..
    Procoding does offer this, so I’m still really keen to start using it once we can import bitmaps and audio.



    Hi Chris,

    yay, there is news: After spending the last couple of months rewriting large parts of the app, I expect Procoding 2.5 to go into beta testing quite soon. Amongst a couple of yet-to-be-revealed-features, there will be iCloud support and the resource manager. I’m really proud of this update and can’t wait to get it out…

    But please be aware, that it takes a lot of time to test for all the various combinations of iOS5, iOS6, iPhone and iPad with or without iCloud. I was planning to go into beta within the next couple of weeks, then it’ll be 7 to 14 days in beta test and finally for one to six weeks in review.

    But (as always), no promises on release dates. Though rest assured that I’m looking forward to this release date as well :-)

    Best regards,



    Great News Micheal,
    I’m really looking forward to upgrading!
    Thanks for your work :)

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Using your own Images / Audio’ is closed to new replies.