Ses düğmesi() duraklatması() bir düğme veya bağlantı ile nasıl değiştirilir?

Question

Bağlantı etiketi tıklandığında çalan bir ses dosyam var. Eğer bağlantı etiketi tekrar tıklanırsa, sesin duraklamasını istiyorum, sadece bu ikinci yarıyı çekmek için javascript hakkında yeterli bilgim yok. Tıkladıkları bağlantı etiketinin içeriğini değiştirmek istemiyorum, sadece ses dosyasının başlamasını ve etiketi tıkladıklarında duraklamasını istiyorum.

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

Answer 1

A Vanilya JavaScript yolu gerekli olanı yapmak.

Not: Yerel js yaklaşımı için birden fazla upvotes ile diğer soru hakkındaki yorumlarda fark ettim ve OP'nin jquery etiketine sahip olmadığını gördüm.

Yani WORKING EXAMPLE:

SOLN 1: (benim ilk çöz kullanarak olayları)

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: (myAudio.paused mülkiyet b kullanarak dandavi's comment tarihinde Esaslı)

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

Bunun için Bir geçiş yapmak için jQuery kullanabilirsiniz: Bu benim en azından oynanabilir ses dosyasını yapar bugüne kadar ne var

.

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