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 through'); }
function myOnLoadedData() { console.log('Loaded data'); }
</script>

More Related Contents:

  1. How to play audio?
  2. Setting HTML5 audio position
  3. HTML5 record audio to file
  4. HTML5 audio streaming: precisely measure latency?
  5. Sound effects in JavaScript / HTML5
  6. How can I add predefined length to audio recorded from MediaRecorder in Chrome?
  7. HTML5 Audio Looping
  8. change src with javascript
  9. HTML5 Audio tag on Safari has a delay
  10. How to play a notification sound on websites?
  11. html5 display audio currentTime
  12. How can I add multiple sources to an HTML5 audio tag, programmatically?
  13. HTML5 Audio can’t play through Javascript unless triggered manually once
  14. Using local file as src
  15. HTML5 audio playlist – how to play a second audio file after the first has ended?
  16. Safari with audio tag not working
  17. How to set the loudness of HTML5 audio?
  18. “Autoplay” HTML5 audio player on mobile browsers
  19. how to get audio.duration value by a function
  20. “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6
  21. How does this recursion work?
  22. React onClick function fires on render
  23. How to iterate (keys, values) in JavaScript? [duplicate]
  24. What is the difference between compile and link function in angularjs
  25. In React.js should I make my initial network request in componentWillMount or componentDidMount?
  26. Javascript before onload?
  27. Calculate FPS in Canvas using requestAnimationFrame
  28. Find caret position in textarea in pixels [duplicate]
  29. Form submit button will not submit when name of button is “submit” [duplicate]
  30. State not getting updated when calling the related setState in React

Leave a Comment