Basic Web Audio API not playing a mp3 file?
Solution 1
i got this thing fixed :) i made use of audio tag along with web audio API. here's the code :
var audio = new Audio();
audio.src = 'audio files/song.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
window.addEventListener('load', function(e) {
// Our <audio> element will be the audio source.
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
}, false);
thnks for trying to help :))
Solution 2
You are using async XMLHttpRequest
(note that it should be spelled by capital "H"), so most probably playSound
function is called before request.onLoad
(note: missing =
) completes.
Try to trace execution of your script using console.log
or similar to find bugs like this and use JavaScript Console to catch syntax errors.
Solution 3
Is your audioURL correct?
audio files/song.mp3
Why is there an empty space?
============Edit============
<script>
//creating an audio context
var context;
var audioBuffer;
window.addEventListener('load', init);
function init()
{
try
{
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context=new AudioContext();
}
catch(e)
{
alert("Your browser doesn't support Web Audio API");
}
loadSound();
// playSound(); // comment here
}
//loading sound into the created audio context
function loadSound()
{
// set the audio file's URL
var audioURL='AllofMe.mp3';
//creating a new request
var request = new XMLHttpRequest();
request.open("GET",audioURL,true);
request.responseType= 'arraybuffer';
request.onload = function(){
//take the audio from http request and decode it in an audio buffer
context.decodeAudioData(request.response, function(buffer){
audioBuffer = buffer;
console.log(audioBuffer);
if(audioBuffer){ // check here
playSound();
}
});
};
request.send();
}
//playing the audio file
function playSound() {
//creating source node
var source = context.createBufferSource();
//passing in file
source.buffer = audioBuffer;
//start playing
source.connect(context.destination); // added
source.start(0);
console.log('playing');
}
</script>
Solution 4
I was looking for the solution to play mp3 on a mobile device, and found this page, I've made provided example to work with a help from here. Providing working example below:
var context;
var saved;
try {
context = new (window.AudioContext || window.webkitAudioContext)();
}
catch (e) {
console.log("Your browser doesn't support Web Audio API");
}
if (saved) {
playSound(saved);
} else {
loadSound();
}
//loading sound into the created audio context
function loadSound() {
//set the audio file's URL
var audioURL = '/path/to/file.mp3';
//creating a new request
var request = new XMLHttpRequest();
request.open('GET', audioURL, true);
request.responseType = 'arraybuffer';
request.onload = function () {
//take the audio from http request and decode it in an audio buffer
context.decodeAudioData(request.response, function (buffer) {
// save buffer, to not load again
saved = buffer;
// play sound
playSound(buffer);
});
};
request.send();
}
//playing the audio file
function playSound(buffer) {
//creating source node
var source = context.createBufferSource();
//passing in data
source.buffer = buffer;
//giving the source which sound to play
source.connect(context.destination);
//start playing
source.start(0);
}
It looks like playing files works fine on Android device, but not iOS. For that you have to follow this guide: How to: Web Audio on iOS (but use touchend event and replace noteOn method to start).
Juhi Davda
Updated on June 24, 2022Comments
-
Juhi Davda about 2 years
I'm trying to follow a tutorial online by piecing together the examples. I feel like this should be playing the mp3 file. I'm using the Chrome browser and it's up to date. I don't get any errors on the console. I'm not sure what I need to change or add to make this work.
<script type="text/javascript"> //creating an audio context window.addEventListener('load',init); function init() { try { window.AudioContext = window.AudioContext || window.webkitAudioContext; var context=new AudioContext(); } catch(e) { alert("Your browser doesn't support Web Audio API"); } loadSound(); playSound(); } //loading sound into the created audio context function loadSound() { //set the audio file's URL var audioURL='audio files/song.mp3'; //creating a new request var request = new XMLhttpRequest(); request.open("GET",audioURL,true); request.responseType= 'arraybuffer'; request.onLoad funtion(){ //take the audio from http request and decode it in an audio buffer var audioBuffer = null; context.decodeAudioData(request.response, function(buffer){ audioBuffer= buffer;}); } request.send(); }, onError); //playing the audio file function playSound(buffer) { //creating source node var source = audioContext.createBufferSource(); //passing in file source.buffer = audioBuffer; //start playing source.start(0); } </script> </head> </html>
-
el.pescado - нет войне over 9 yearsmaybe file
song.mp3
is in directory namedaudio files
. -
Juhi Davda over 9 yearsyes, it is in the directory audio files.And i corrected the errors u pointed out. It's still not working :(
-
notthetup over 9 yearsThat works. But you can also make it work the initial way you tried. Look at @el.pescado's suggestion.