html5-audio – Make Me Engineer

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=”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

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

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]);

Setting the granularity of the HTML5 audio event ‘timeupdate’

It should be noted that you can read the currentTime property of a video much more often. If time is really critical, and you can live with a little bit of uncertainty, you can try this instead. It is, however, a lot less elegant than using the tag’s own timeupdate event. setInterval(function () { console.log(audio.currentTime); … Read more

HTML5 Audio can’t play through Javascript unless triggered manually once

Well, for my purposes, here’s what I did: Luckily, before the user can trigger the behavior to start audio, they have to click a button. I set the volume of the element to 0.0, and have it “play” when they click this button. After the sound is played silently, I simply set the volume property … Read more

html5 display audio currentTime

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?

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

HTML5 Audio tag on Safari has a delay

On desktop Safari, adding AudioContext fixes the issue: const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); I found out by accident, so I have no idea why it works, but this removed the delay on my app.

change src with javascript

Try this snippet list.onclick = function(e) { e.preventDefault(); var elm = e.target; 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 audio.play(); //call this to play the song right away }; <ul style=”list-style: none”> <li>Audio Files <ul id=”list”> <li><a href=”#” data-value=”http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga”>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(“https://stackoverflow.com/questions/3273552/someSound.ogg”); myAudio.addEventListener(‘ended’, function() { this.currentTime = 0; this.play(); }, false); myAudio.play();

+ More