Javascript 如何使用一个按钮或链接切换音频播放（）暂停（）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27368778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to toggle audio play() pause() with one button or link?
提问by ExcellentSP
I have an audio file that plays when an anchor tag is clicked. If the anchor tag is clicked again, I want the audio to pause, I just don't know enough about javascript to pull this second half off. I don't want to change the content of the anchor tag they click, I just want the audio file to start and pause whenever they click the tag.
我有一个音频文件，可以在单击锚标记时播放。如果再次单击锚标记，我希望音频暂停，我只是对 javascript 了解得不够多，无法将后半部分关闭。我不想更改他们单击的锚标记的内容，我只想在他们单击标记时启动和暂停音频文件。
This is what I have so far, which at least makes the sound file playable:
到目前为止，这是我所拥有的，至少可以使声音文件可播放：
<audio id="audio" src="/Demo.mp3"></audio>
<a onClick="document.getElementById('audio').play()">Click here to hear.</a>
回答by Iceman
A Vanilla Javascript way to do what you required.
一种 Vanilla Javascript 方式来做你需要的。
Note: I've noticed comments on other question with multiple upvotes for a native js approach and saw the OP has no jquerytag.
注意：我注意到对其他问题的评论对本机 js 方法进行了多次投票，并且看到 OP 没有jquery标签。
So WORKING EXAMPLE:
所以WORKING EXAMPLE：
SOLN 1: (my initial soln using events)
SOLN 1:(我最初使用事件的解决方案）
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: (using myAudio.pausedproperty based on dandavi's comment)
SOLN 2:(myAudio.paused根据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>回答by Peter Isaac
var audioElement= document.getElementById("audio-player");
function togglePlay() {
if (audioElement.paused) {
audioElement.play();
}
else {
audioElement.pause();
}
};
回答by Peter Isaac
You could use jQuery to make a toggle for this.
您可以使用 jQuery 对此进行切换。
<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>
回答by Usama Aleem
var Sample-Audio = document.getElementById("Sample");
function togglePlay() {
return Sample-Audio.paused ? Sample-Audio.play() : Sample-Audio.pause();
};
<audio id="Sample" preload="auto">
<source src="./sounds/rain.mp4" type="audio/mp4">
<source src="./sounds/rain.ogg" type="video/ogg">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>
