How to toggle audio play() pause() with one button or link?

by

A Vanilla Javascript way to do what you required.

Note: I’ve noticed comments on other question with multiple upvotes for a native js approach and saw the OP has no jquery tag.

So WORKING EXAMPLE:

SOLN 1: (my initial soln using events)

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  isPlaying ? myAudio.pause() : myAudio.play();
};

myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

SOLN 2: (using myAudio.paused property based on dandavi’s comment) 

var myAudio = document.getElementById("myAudio");

function togglePlay() {
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};
<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

More Related Contents:

  1. HTML 5 video or audio playlist
  2. Node.js can’t create Blobs?
  3. How to prevent “The play() request was interrupted by a call to pause()” error?
  4. HTML5 check if audio is playing?
  5. Why don’t audio and video events bubble?
  6. How to mute all sound in a page with JS?
  7. How to play a notification sound on websites?
  8. html5 display audio currentTime
  9. HTML 5 – Play file at certain time point
  10. HTML5 playback with fade in and fade out
  11. gapless looping audio html5
  12. How to capture generated audio from window.speechSynthesis.speak() call?
  13. How to play only the audio of a Youtube video using HTML 5?
  14. HTML5 audio playlist – how to play a second audio file after the first has ended?
  15. How to check if HTML5 audio has reached different errors
  16. Javascript make audio blob
  17. How to set the loudness of HTML5 audio?
  18. Generating sound on the fly with javascript/html5
  19. How to store objects in HTML5 localStorage
  20. javascript – shuffle HTML list element order
  21. How to dynamically create ‘@-Keyframe’ CSS animations?
  22. Check Ctrl / Shift / Alt keys on ‘click’ event
  23. Make anchor link go some pixels above where it’s linked to
  24. jQuery vs document.querySelectorAll
  25. img onload doesn’t work well in IE7
  26. jQuery DataTables “No Data Available in Table”
  27. Gaussian Blur onHover Using jQuery
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Converting sanitised html back to displayable html
  30. Creating a Clickable Grid in a Web Browser

Leave a Comment