Why does my audio buffer doesn't play any sound? [Web Audio API]

Question

My audio buffer doesn't seems to work and I don't know why. I already tried opening it in Chrome and in Safari but nothing happens. I also checked that everything's ok with my audio file "Audio2.mp3".

"use strict"

//Create the Audio Context, compatible with older Firefox and Chrome browsers
function audioContextCheck(){
    if (typeof AudioContext !== "undefined"){
        return new AudioContext();
    }
    else if (typeof webkitAudioContext !== "undefined") {
        return new webkitAudioContext();
    }
    else if (typeof mozAudioContext !== "undefined") {
        return new mozAudioContext();
    }
    else {
        throw new Error('AudioContext not supported');
    }
}

var audioContext = audioContextCheck();


//Create audio buffer to the audio file with the XMLHttpRequest
var audioBuffer;

var getSound = new XMLHttpRequest();
getSound.open("get", "Audio2.mp3", true);
getSound.responseType = "arraybuffer";

getSound.onload = function(){
    audioContext.decodeAudioData(getSound.response, function(buffer) {
        audioBuffer = buffer;
    });
};

getSound.send();

//EventListener

window.addEventListener("load", playback);

//Now create the function necessary to play back the audio buffer

function playback(){
    var playSound = audioContext.createBufferSource();
    playSound.buffer = audioBuffer;
    playSound.connect(audioContext.destination);
    playSound.start(audioContext.currentTime);
}

choz · Accepted Answer · 2018-10-11T05:54:44.050

Because, you trigger playback() before audioBuffer has been defined.

Try to wait until the audio xhr has fully loaded, assign the audioBuffer then perform the playback(), and it will work as expected.

E.g.

//Create the Audio Context, compatible with older Firefox and Chrome browsers
function audioContextCheck() {
  if (typeof AudioContext !== "undefined") {
    return new AudioContext();
  } else if (typeof webkitAudioContext !== "undefined") {
    return new webkitAudioContext();
  } else if (typeof mozAudioContext !== "undefined") {
    return new mozAudioContext();
  } else {
    throw new Error('AudioContext not supported');
  }
}

var audioContext = audioContextCheck();


//Create audio buffer to the audio file with the XMLHttpRequest
var audioBuffer;

var getSound = new XMLHttpRequest();
getSound.open("get", "https://cdn.rawgit.com/devildrey33/devildrey33/ddb01d71/Ejemplos/BannerTest/Canciones/LevenRain_-_ActionMan_Versus_The_CyberParasites.mp3", true);
getSound.responseType = "arraybuffer";

getSound.onload = function() {
  document.getElementById("xhrStatus").textContent = "Loaded";
  audioContext.decodeAudioData(getSound.response, function(buffer) {
    audioBuffer = buffer;
    playback(); // <--- Start the playback after `audioBuffer` is defined.
  });
};

getSound.send();

//EventListener

// window.addEventListener("load", playback);

//Now create the function necessary to play back the audio buffer

function playback() {
  var playSound = audioContext.createBufferSource();
  playSound.buffer = audioBuffer;
  playSound.connect(audioContext.destination);
  playSound.start(audioContext.currentTime);
}

<p id="xhrStatus"> Loading the audio.. </p>

@IsaiasHerrera The sample above works though. Or probably the problem lies elsewhere such as audio permission in mobile browsers. — choz, Oct 11 '18 at 01:06
It worked! This was my problem: https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local — Isaias Herrera, Oct 12 '18 at 03:01

Why does my audio buffer doesn't play any sound? [Web Audio API]

1 Answers1