html5-audio

Html 5 audio tag custom controls?

by

You create your elements like so… <audio id=”yourAudio” preload=’none’> <source src=”https://stackoverflow.com/questions/7638754/the url to the audio” type=”audio/wav” /> </audio> <a href=”#” id=”audioControl”>play!</a> And add some functionality: var yourAudio = document.getElementById(‘yourAudio’), ctrl = document.getElementById(‘audioControl’); ctrl.onclick = function () { // Update the Button var pause = ctrl.innerHTML === ‘pause!’; ctrl.innerHTML = pause ? ‘play!’ : ‘pause!’; // … Read more

HTML5 audio playlist – how to play a second audio file after the first has ended?

by

Here’s a JSLinted, unobtrusive Javascript example demonstrating how to handle and use the ended mediaevent. In your particular situation, you would trigger playback of the second audio file in your ended event handler. You can use the code below or run the test fiddle. Click an item in the playlist to begin playback. After one … Read more

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

by

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=”https://stackoverflow.com/questions/4053262/audio/song.mp3″; } else { source.type=”audio/ogg”; source.src=”https://stackoverflow.com/questions/4053262/audio/song.ogg”; } audio.appendChild(source); Add as many checks as you have file types.

Saving WAV File Recorded in Chrome to Server

by

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: “,e.target.responseText); } }; var fd=new FormData(); fd.append(“that_random_filename.wav”,blob); xhr.open(“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

by

I can think of two ways. Within your audio tag: src=”https://stackoverflow.com/questions/21737224/file:///C:/.file.mp3″ 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

by

Here’s an example: <audio id=”track” src=”http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg” ontimeupdate=”document.getElementById(‘tracktime’).innerHTML = Math.floor(this.currentTime) + “https://stackoverflow.com/” + 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?

by

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=”https://stackoverflow.com/questions/8059434/myaudio.ogg” controls> <a href=”https://stackoverflow.com/questions/8059434/myaudio.ogg”>Download</a> </audio> <script> function myOnCanPlayFunction() { console.log(‘Can play’); } function myOnCanPlayThroughFunction() { console.log(‘Can play … Read more