How to play audio?

by

If you don’t want to mess with HTML elements:

var audio = new Audio('audio_file.mp3');
audio.play();


function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
  audio.play();
}
<button onclick="play()">Play Audio</button>

This uses the HTMLAudioElement interface, which plays audio the same way as the <audio> element.

If you need more functionality, I used the howler.js library and found it simple and useful.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

More Related Contents:

  1. HTML5 record audio to file
  2. HTML5 audio streaming: precisely measure latency?
  3. Sound effects in JavaScript / HTML5
  4. HTML5 Audio Looping
  5. change src with javascript
  6. HTML5 Audio tag on Safari has a delay
  7. How to play a notification sound on websites?
  8. html5 display audio currentTime
  9. How can I add multiple sources to an HTML5 audio tag, programmatically?
  10. HTML5 Audio can’t play through Javascript unless triggered manually once
  11. HTML5 audio playlist – how to play a second audio file after the first has ended?
  12. How to set the loudness of HTML5 audio?
  13. “Autoplay” HTML5 audio player on mobile browsers
  14. Write tags in HTML and print
  15. Prevent HTML5 video from being downloaded (right-click saved)?
  16. Get page generated with Javascript in Python
  17. Refresh a page using JavaScript or HTML [duplicate]
  18. Difference between Node object and Element object?
  19. HTML5 dragleave fired when hovering a child element
  20. Open link in iframe [closed]
  21. Is it possible to play HTML5 video in reverse?
  22. Load event not fired on Safari when reloading page
  23. Multiple Select limit number of selection
  24. Can you use both the async and defer attributes on a HTML tag?
  25. How to vertically align all text in CSS?
  26. How can I stop an onclick event from firing for parent element when child is clicked?
  27. getting mouse position with javascript within canvas
  28. document.activeElement returns body in onblur handler
  29. How to hide optgroup/option elements?
  30. When to access the attribute (vs the property)?

Leave a Comment