How can I add multiple sources to an HTML5 audio tag, programmatically?

Why add multiple files with JavaScript when you can just detect the types supported? I would suggest instead detecting the best type then just setting the src. var source= document.createElement(‘source’); if (audio.canPlayType(‘audio/mpeg;’)) { source.type=”audio/mpeg”; source.src=”″; } else { source.type=”audio/ogg”; source.src=””; } audio.appendChild(source); Add as many checks as you have file types.

Saving WAV File Recorded in Chrome to Server

Client side JavaScript function to upload the WAV blob: function upload(blob) { var xhr=new XMLHttpRequest(); xhr.onload=function(e) { if(this.readyState === 4) { console.log(“Server returned: “,; } }; var fd=new FormData(); fd.append(“that_random_filename.wav”,blob);“POST”,”<url>”,true); xhr.send(fd); } PHP file upload_wav.php: <?php // get the temporary name that PHP gave to the uploaded file $tmp_filename=$_FILES[“that_random_filename.wav”][“tmp_name”]; // rename the temporary file … Read more

Using local file as src

I can think of two ways. Within your audio tag: src=”″ or you could use a Blob using the file API. HTML: <input type=”file”></input> JS: audio.src = URL.createObjectURL(document.getElementsByTagName(‘input’)[0].files[0]);

html5 display audio currentTime

Here’s an example: <audio id=”track” src=”” ontimeupdate=”document.getElementById(‘tracktime’).innerHTML = Math.floor(this.currentTime) + “” + Math.floor(this.duration);”> <p>Your browser does not support the audio element</p> </audio> <span id=”tracktime”>0 / 0</span> <button onclick=”document.getElementById(‘track’).play();”>Play</button> This should work in Firefox and Chrome, for other browsers you’ll probably need to add alternative encodings.

How do you check if a HTML5 audio element is loaded?

To find out when the audio is ready to start playing, add listeners for the oncanplay or oncanplaythrough events. To find out when the audio has loaded at all, listen to the onloadeddata event: <audio oncanplay=”myOnCanPlayFunction()” oncanplaythrough=”myOnCanPlayThroughFunction()” onloadeddata=”myOnLoadedData()” src=”” controls> <a href=””>Download</a> </audio> <script> function myOnCanPlayFunction() { console.log(‘Can play’); } function myOnCanPlayThroughFunction() { console.log(‘Can play … Read more

change src with javascript

Try this snippet list.onclick = function(e) { e.preventDefault(); var elm =; var audio = document.getElementById(‘audio’); var source = document.getElementById(‘audioSource’); source.src = elm.getAttribute(‘data-value’); audio.load(); //call this to just preload the audio without playing; //call this to play the song right away }; <ul style=”list-style: none”> <li>Audio Files <ul id=”list”> <li><a href=”#” data-value=””>Death_Becomes_Fur.oga</a></li> <li><a href=”#” … Read more

HTML5 Audio Looping

While loop is specified, it is not implemented in any browser I am aware of Firefox [thanks Anurag for pointing this out]. Here is an alternate way of looping that should work in HTML5 capable browsers: var myAudio = new Audio(“”); myAudio.addEventListener(‘ended’, function() { this.currentTime = 0;; }, false);;