Web Audio API

Home Forums Procoding Web Audio API

This topic contains 16 replies, has 1 voice, and was last updated by  Mach 5 years ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #980

    Mach

    hello :)
    I’m new to procoding. I look forward to work with Processing/Javascript on my Ipad
    Is there any easy way to use audio/soudn/music with procoding?
    Is Web Audio API supported maybe?
    Tnx a lot

    #981

    audiocommander
    Keymaster

    Hi,

    yes, (webkit-) webAudio is available on iOS (iPhone/iPad) and works quite nice.

    Unfortunately there’s a bug in Mac OS X since 10.7 that prevents webAudio in webViews running inside an application. But previewing the sketch in a browser works fine. I hope this bug has been addressed on the upcoming OSX Yosemite.

    There are some impressive webkit-webAudio projects out there that run on iOS.

    Best,
    Michael

    #982

    Mach

    Good news.
    When I try to use AudioContext like in the follwing example code,
    var context;
    window.addEventListener(‘load’, init, false);
    function init() {
    try {
    // Fix up for prefixing
    window.AudioContext = window.AudioContext||window.webkitAudioContext;
    context = new AudioContext();
    }
    catch(e) {
    alert(‘Web Audio API is not supported in this browser’);
    }
    }

    I get an error in procoding app
    # AudioContext is not defined

    which is the right template to start coding in the procoding app
    to use Web Audio Api.

    Are there any examples/template that use audio in procoding app?

    tnx

    #983

    audiocommander
    Keymaster

    Hi,

    there aren’t any examples yet included, but your snippet looks okay.

    At this point I’m not sure whether you see the error in the console log or just in the JSHint Syntax Checker. If it’s only the checker, you just need to either use window.AudioContext or explicitly tell JSHint that this is a global variable:

    /*global AudioContext:true */

    If it’s the log:
    I’m using this initialization without any error or warnings (also note the JSHint statements):


    /*global AudioContext:true,
    webkitAudioContext:false
    */

    getAudioContext = function() {

    var context;

    // get the audio context
    if(typeof AudioContext !== 'undefined') {
    context = new AudioContext();
    } else if(typeof webkitAudioContext !== 'undefined') {
    context = new webkitAudioContext();
    } else {
    console.log("AudioContext is not supported on this environment :(");
    }

    return context;
    };

    One word of caution though: -webkit WebAudio is not super stable. It usually works, but if you do some strange stuff or , your script might crash the browser (and in this case also Procoding). So try to check the Canvas as often as possible (this triggers the autosave) and make some versions and backups…

    Best,
    Michael

    #984

    Mach

    /*global AudioContext:true */ did the job.

    Now I’ll try to get some wav files loaded and try tp play them.

    Need some help with debugging.
    Where is the console.log output displayed when running a program?
    Tnx

    #985

    audiocommander
    Keymaster

    Mach,

    if you just want to playback an audio file, you don’t need webAudio. Just add the audio to your resources and then insert a code snippet.

    WebAudio is good for building a synth with oscillators, generating sounds and providing realtime effects.

    Also see the included “Mosquito” example.

    console.log is displayed in the canvas.
    There’s also a real WebKit debugger, but you’ll need a Mac with Safari (or the OSX Version of Procoding).

    best, Michael

    #986

    Mach

    Tnx for the hints. At seom time I need more than just playback of audio files, sso
    I have to take a closer look at Web Audio.
    I’ve tried the resource.play() funktion with my own audio file but that didn’t
    work (maybe for some other reason, since I don’t see my debug message in the canvas as well).
    Mosquito plays fine.
    Still learning JavaScript :)

    #987

    Mach

    Before starting to reinvent the wheel, is there any MIDI or OSC avaiable
    using JavaScript or Processing.js?
    And or ois it possibel to use any other libraries in procoding, is
    there an import or do I have to use cut and paste of code?

    Whenever you have soemthing related to sound/audio I’m very interested to hear.
    tnx a lot

    #988

    audiocommander
    Keymaster

    Even though there is a MIDI plugin for browsers, it won’t work on iOS because it’s implemented in Java. So, there is no MIDI or OSC with JavaScript on iOS (you’d need to code natively with Obj-C or Swift).

    However, there are WebSockets for HTML5 to create and establish realtime communication, but you’ll need a WebSocket server for that (there’s an example on Procoding OSX, node.js must be installed for the server script). There are some proof-of-concepts for OSC over WebSockets out there, but it’ll be quite complex to do it right.

    You cannot use Java-Libraries for processing.js. But you can use any JavaScript-Library or -script for JavaScript based documents in Procoding. Just add them to the resources and they’ll be automatically loaded.

    best,
    Michael

    #992

    Mach

    tnx a lot Michael for the detailed answers.
    Great to have library resource files loaded automatically.

    I’m still having problems to import audio files into
    Webaudio buffers.
    I have added the .wav files to the resources list.
    but the code snippet only just plays them with the .play method when used
    like in the Mosquito example.
    But I need the in buffers, like in the example below and there the resource file
    need to be accessed using a url (path, filename). What is that url for a resource file?
    tnx

    window.onload = init;
    var context;
    var bufferLoader;

    function init() {
    // Fix up prefixing
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();

    bufferLoader = new BufferLoader(
    context,
    [
    ‘../sounds/hyper-reality/br-jam-loop.wav’,
    ‘../sounds/hyper-reality/laughter.wav’,
    ],
    finishedLoading
    );

    bufferLoader.load();
    }

    function finishedLoading(bufferList) {
    // Create two sources and play them both together.
    var source1 = context.createBufferSource();
    var source2 = context.createBufferSource();
    source1.buffer = bufferList[0];
    source2.buffer = bufferList[1];

    source1.connect(context.destination);
    source2.connect(context.destination);
    source1.start(0);
    source2.start(0);
    }

    #993

    audiocommander
    Keymaster

    Hi Mach,

    all resources live inside the resources folder:
    – index.html
    – resources
    — laughter.wav

    Assuming there’s “laughter.wav” in the resources, it’d have this path:
    “resources/laughter.wav”

    Subfolders are supported, but IIRC it’s pretty impossible to add a folder with iOS (Procoding OSX support drag & drop with folders).

    Cheers,
    Michael

    #994

    Mach

    Hi Michael,

    great, just a subfolder reference.

    I tried a few things, but some strange things happened.

    I get an error:
    Processing.js: Unable to execute pjs sketch: Syntax Error: Expected token ‘(‘

    when trying to run my sketch.

    I used the default processing sketch, imported the ‘maxim.js’ lib (kinda Processing wrapper for WebAudio)
    to resources folder.
    https://github.com/micknoise/Maxim

    Even when I comment out an even remove every bit of code that uses the library the error still remains.

    When I remove the library from the resources everything works fine.
    When I add the library again everything works fine until I edit the code (add a single blank char) the the error appears again.

    hope you can help.

    tnx

    #995

    audiocommander
    Keymaster

    well, that’s fairly obvious: you’re trying to add a JavaScript file to a processing.js sketch. That doesn’t work.

    You can add a JavaScript file to a JavaScript-based sketch or a processing .pde/.java/.class file to a processing.js sketch.

    Add the maxim.js source to a HTML, HTML-Canvas, procoding or d3 sketch and it’ll work.

    Regards,
    Michael

    #996

    Mach

    but that library is exactly writting for the purose of adding audio
    to processing.js.I used it a lot in a course I took at University of London.
    Here is an example project we used.
    http://doc.gold.ac.uk/~mus02mg/HTML5/sonicPainter/

    When I switch to HTML, Canvas or procoding I have to write all my code in JS.
    I like processing for the grafix and UI stuff, because I have a lot of code already and
    some processing libs I want to use and it’s easier for me to program in processing than JS.
    I hope I can use the maxim.js in some way to use in procoding and don’t have to
    use the processing IDE, because procodimg is the only way (and that is why I really like
    your program) I can develop on iOS as well.
    Hope you can help to find a solution to add this audio library in procoding.
    One difference I have spotted is that in the other projects I have done the maxin.js has to
    reside in the main directory of the sketch and in procoding it is located
    in the resources subdir.
    Hope you can help.

    Tnx

    #997

    Mach

    When I switch to HTML, Canvas or procoding I have to write all my code in JS.
    I like processing for the grafix and UI stuff, because I have a lot of code already and
    some processing libs I want to use and it’s easier for me to program in processing than JS.
    I hope I can use the maxim.js in some way to use in procoding and don’t have to
    use the processing IDE, because procodimg is the only way (and that is why I really like
    your program) I can develop on iOS as well.
    Hope you can help to find a solution to add this audio library in procoding.
    One difference I have spotted is that in the other projects I have done the maxin.js has to
    reside in the main directory of the sketch and in procoding it is located
    in the resources subdir.
    Hope you can help.

    Tnx

Viewing 15 posts - 1 through 15 (of 17 total)

The topic ‘Web Audio API’ is closed to new replies.