CODEWITHSUNDEEP
javascriptjqueryaudio
Hedi
Hedi

Reputation: 137

Why aren't my javascript audio controls working with Web Audio API?

Why aren't my javascript audio-controls working with Web Audio API? Can someone see anything wrong that I'm doing? I've used: 

            $('.play').click(function() {
                audioBufferSourceNode.play();   
            });

            $('.pause').click(function() {
                audioBufferSourceNode.pause();
            });

            $('.volumeMax').click(function() {
                audioBufferSourceNode.volume=1;
            });

            $('.volumestop').click(function() {
            audioBufferSourceNode.volume=0;
            });

            $('.playatTime').click(function() {
                audioBufferSourceNode.currentTime= 35;
                audioBufferSourceNode.play();
            });

but for some reason it's not working. this is my index.php page.

           <div id="wrapper">
        <div id="fileWrapper" class="file_wrapper">
            <div id="info">
                HTML5 Audio API showcase | An Audio Viusalizer
            </div>
            <label for="uploadedFile">Drag&drop or select a file to play:</label>
            <input type="file" id="uploadedFile"></input>
        </div>
        <div id="visualizer_wrapper">
            <canvas id='canvas' width="800" height="350"></canvas>
        </div>
    </div>
    <footer>
    </footer>
   <div class="audioPlayer">  

        <button type="button" class="play">play</button>
        <button type="button" class="pause">pause</button>
        <button type="button" class="playatTime">play at 35 seconds</button>
        <button type="button" class="volumestop">Volume to 0</button>
        <button type="button" class="volumeMax">Volume open</button>

This is where my controls are on javascript file, which is on line 125 on the full source code: https://jsfiddle.net/4hty6kak/5/ Some reason visualizer doesn't work on jsfiddle, not sure why. So I'm not sure how people will exactly test this visualizer, any good alternatives?

 _visualize: function(audioContext, buffer) {
    var audioBufferSourceNode = audioContext.createBufferSource(),
        analyser = audioContext.createAnalyser(),
        that = this;
    //connect the source to the analyser
    audioBufferSourceNode.connect(analyser);

            $('.play').click(function() {
                audioBufferSourceNode.play();   
            });

            $('.pause').click(function() {
                audioBufferSourceNode.pause();
            });

            $('.volumeMax').click(function() {
                audioBufferSourceNode.volume=1;
            });

            $('.volumestop').click(function() {
            audioBufferSourceNode.volume=0;
            });

            $('.playatTime').click(function() {
                audioBufferSourceNode.currentTime= 35;
                audioBufferSourceNode.play();
            });     



    //connect the analyser to the destination(the speaker), or we won't hear the sound
    analyser.connect(audioContext.destination);
    //then assign the buffer to the buffer source node
    audioBufferSourceNode.buffer = buffer;
    //play the source
    if (!audioBufferSourceNode.start) {
        audioBufferSourceNode.start = audioBufferSourceNode.noteOn //in old browsers use noteOn method
        audioBufferSourceNode.stop = audioBufferSourceNode.noteOff //in old browsers use noteOn method
    };
    //stop the previous sound if any
    if (this.animationId !== null) {
        cancelAnimationFrame(this.animationId);
    }
    if (this.source !== null) {
        this.source.stop(0);
    }
    audioBufferSourceNode.start(0);
    this.status = 1;
    this.source = audioBufferSourceNode;
    audioBufferSourceNode.onended = function() {
        that._audioEnd(that);
    };
    this._updateInfo('Playing ' + this.fileName, false);
    this.info = 'Playing ' + this.fileName;
    document.getElementById('fileWrapper').style.opacity = 0.2;
    this._drawSpectrum(analyser);
 },

full code:

https://jsfiddle.net/4hty6kak/5/

Do you have any solutions?

Upvotes: 0

Views: 229

Answers (1)

MiltoxBeyond
MiltoxBeyond

Reputation: 2731

The problem was twofold:

First: In JSFiddle you have to ensure you include the right Framework (I used jQuery v1.11) and Ensure that if your script tries to add anything to onload, either wrap it in the head or the body, but not the window.onload event in the options for the JSFiddle (By default it runs everything onload).

Second: You had a typo in your code, where you define the events you forget to misspell all your references as you had in the rest of the code.

$('.play').click(function(){audioBufferSourceNode.play()});

Should be:

$('.play').click(function(){audioBufferSouceNode.play()});

Note the missing R in source. You had defined it as audioBufferSouceNode.

I found it easier to just change it in the events since you used it elsewhere with the same misspelling.

I updated your JSFiddle to fix the problem: https://jsfiddle.net/4hty6kak/10/

Upvotes: 1

Related Questions