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
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.
I found the reason why it’s not working on this question: HTML5 video will not loop Our server doesn’t understand partial content right now. As a result chrome is sending requests for content that doesn’t get answered which in turn makes our video’s and audio unseekable (and unloopable).
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
Just after initializing the Audio object, add the following: audio.crossOrigin = “anonymous”; This should prevent the CORS access restriction.
Live Demo: https://www.webrtc-experiment.com/DetectRTC/ If user didn’t allow webcam and/or microphone, then media-devices will be having “NULL” value for the “label” attribute. Above page will show this message: “Please invoke getUserMedia once.” PS. You can type “DetectRTC.MediaDevices” in the Chrome Console developers tool. Note: It works only in Chrome. Firefox isn’t supporting similar API yet. (Updated: … Read more
Do not use HTMLAudioElement for that kind of application. The HTMLMediaElements are by nature asynchronous and everything from the play() method to the pause() one and going through the obvious resource fetching and the less obvious currentTime setting is asynchronous. This means that for applications that need perfect timings (like a Morse-code reader), these elements … Read more
Yes, the Web Audio API (along with AJAX or Websockets) can be used for streaming. Basically, you pull down (or send, in the case of Websockets) some chunks of n length. Then you decode them with the Web Audio API and queue them up to be played, one after the other. Because the Web Audio … Read more
Here’s a (slightly outdated) summary of the current status of HTML5 Audio and Icecast streams. As you can see, a MP3 source only seems to work in Safari (and possibly IE9). You might need to experiment with some server-side transcoding (with ffmpeg or mencoder) to OGG Vorbis. I’m pretty sure I was able to get … Read more
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