Wie Audio Play() Pause() mit einer Taste oder Link?

Question

Ich habe eine Audiodatei, die abgespielt wird, wenn auf ein Anker-Tag geklickt wird. Wenn der Anker-Tag erneut angeklickt wird, möchte ich, dass der Ton pausiert. Ich weiß einfach nicht genug über Javascript, um diese zweite Hälfte abzuziehen. Ich möchte den Inhalt des Anker-Tags, auf das sie klicken, nicht ändern. Ich möchte nur, dass die Audiodatei beim Klicken auf das Tag gestartet und angehalten wird.

Das ist, was ich bisher haben, die zumindest die abspielbaren Audiodatei macht:

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

Answer 1

Ein Vanilla Javascript Weg zu tun, was Sie benötigt.

Hinweis: Ich habe bemerkt, Kommentare zu anderen Fragen mit mehreren upvotes für eine native js Ansatz und sah das OP hat keine jquery Tag.

So WORKING EXAMPLE:

SOLN 1: (meine erste Lsg mit Ereignissen)

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: (mit myAudio.paused Eigenschaft b ased auf 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

Sie könnten jQuery verwenden, um für diese eine Knebel zu machen.

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