Jak przełączyć odtwarzanie dźwięku() Wstrzymać() za pomocą jednego przycisku lub łącza?

Question

Mam plik audio odtwarzany po kliknięciu znacznika zakotwiczenia. Jeśli znacznik kotwicy zostanie kliknięty ponownie, chcę, aby dźwięk zatrzymał się, po prostu nie wiem wystarczająco dużo o javascriptu, aby wyciągnąć tę drugą połowę. Nie chcę zmieniać zawartości zakotwiczonego znacznika, który klikają, chcę tylko, aby plik audio był uruchamiany i wstrzymywany za każdym razem, gdy kliknie znacznik.

To, co mam tak daleko, których przynajmniej sprawia plik dźwiękowy grywalne:

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

Answer 1

Vanilla JavaScript sposób zrobić to, co wymagane.

Uwaga: Zauważyłem komentarze do innych pytań z wieloma próbami pobicia dla natywnego podejścia js i zobaczyłem, że OP nie ma znacznika jquery.

Więc WORKING EXAMPLE:

SOLN 1 (moje początkowe roztw wykorzystujące imprezy)

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 (używając myAudio.paused własności b ased na 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>

Answer 2

można użyć jQuery aby przełączać za to.

<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>