web-dev-qa-db-fra.com

Comment basculer la lecture audio () pause () avec un bouton ou un lien?

J'ai un fichier audio qui joue quand on clique sur une balise d'ancrage. Si vous cliquez à nouveau sur la balise d'ancrage, je veux que l'audio soit mis en pause. Je ne connais pas suffisamment le langage javascript pour retirer cette seconde moitié. Je ne veux pas changer le contenu de la balise d'ancrage sur laquelle ils cliquent, je veux juste que le fichier audio commence et se mette en pause chaque fois que la balise est cliquée.

C’est ce que j’ai fait jusqu’à présent, ce qui rend au moins le fichier son lisible:

<audio id="audio" src="/Demo.mp3"></audio>
<a onClick="document.getElementById('audio').play()">Click here to hear.</a>
javascripthtmlaudio
9
ExcellentSP

Un moyen Javascript Vanille de faire ce que vous aviez besoin. 

Remarque: j'ai remarqué des commentaires sur une autre question avec plusieurs votes positifs pour une approche js native et j'ai constaté que l'OP n'avait pas de balise jquery.

Donc WORKING EXAMPLE:

SOLN 1: (ma solution initiale utilisant des événements)

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

function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    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: (en utilisant la propriété myAudio.paused basée sur le commentaire de dandavi ) 

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>

10
Iceman
var audioElement= document.getElementById("audio-player");
function togglePlay() {
    if (audioElement.paused) {
        audioElement.play();
    }
    else {
        audioElement.pause();
    }
};
3
Peter Isaac

Vous pouvez utiliser jQuery pour créer une bascule à cet effet.

<a id="music-button" style="cursor:pointer;">
<img src="http://i.stack.imgur.com/LT3WE.png"></a>
<audio id="playMusic" autoplay>
<source src="sound.mp3">
</audio>

<script type="text/javascript">
$('#music-button').toggle(
function () {
document.getElementById('playMusic').play();
},
function () {
document.getElementById('playMusic').pause();
}
);
</script>
2
user4051844