带有音频标签的多个播放/暂停按钮 [英] Multiple Play/Pause button with audio tag
问题描述
我在使用同一代码中的多个播放/暂停按钮时遇到麻烦，我在一个表中有一个按钮，然后在右边的单元格上有歌曲名称.
Im having trouble with more than 1 play/pause button in a same code, i have a table where there is a button and then the song name on cell to the right.
该按钮可以正常工作，下面是代码(从互联网上获取):
the button works perfectly, here is the code(got it from internet):
<script language="javascript">
function play_pause() {
var myAudio = document.getElementById("myAudio");
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
</script>
还有音频部分
<html>
<table>
<tr>
<td>
<audio preload="none" id="myAudio" src="music.mp3" type="audio/mpeg"</audio>
<img src="play.png" width=30 height=30 border="0" onclick="play_pause()";>
</td>
</tr>
<tr>
<td>
<audio preload="none" id="myAudio" src="music2.mp3" type="audio/mpeg"</audio>
<img src="play.png" width=30 height=30 border="0" onclick="play_pause()";>
</td>
</tr>
</table>
</html>
因此，每当我在网络上播放任何按钮时，它都会开始播放第一首歌曲，并且如果我尝试播放另一首歌曲，就像不暂停第一首歌曲一样(实际上，即使我找到了另一首，也只能播放第一首). 我很确定是因为我的函数中缺少代码，并且因为两个音频标签都引用了相同的ID，但是，为了使我的页面正常工作，我到底需要在脚本上实现什么呢?我已经尝试了很多东西，但不能真正使它按我的意愿工作. 非常感谢您的建议，谢谢.
So whenever i play any button on my web, it starts the first song and if i try to play another its like im unpausing the first one (actually only play the first one, even when i sourced another) Im pretty sure is because of the lack of code in my function, and because both audio tags reference the same ID, but however, what do i exactly have to implement on my script to make my page works fine? I've tried a lot of things but can't really make it works as i want. I'd highly appreciate some advices, thanks in advance.
Ps:现在对我来说不是必须的，但是如果有了代码，我也可以为音频获取一个更改图标，我的意思是当单击"时，我将更改为暂停图标，谢谢！
Ps: Is not necessary for me now, but if with the code i can also get a change icon for my audio, i mean when "onclick" it i change to a pause icon, thanks!
推荐答案
您可以在这样的对象之间放一些差异
You may Put difference between objects like this
function play_pause(player) {
var myAudio = document.getElementById(player);
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
还有
<html>
<table>
<tr>
<td>
<audio preload="none" id="myAudio1" src="music.mp3" type="audio/mpeg"</audio>
<img src="play.png" width=30 height=30 border="0" onclick="play_pause('myAudio1')";>
</td>
</tr>
<tr>
<td>
<audio preload="none" id="myAudio2" src="music2.mp3" type="audio/mpeg"</audio>
<img src="play.png" width=30 height=30 border="0" onclick="play_pause('myAudio2')";>
</td>
</tr>
</table>
使用此循环可容纳4个以上玩家
EDITS: Use this loop for more than 4 players
var songs=['song1.mp3','song2.mp3','song3.mp3','song4.mp3'];
var players="<table>";
for(var i=0;i<songs.length;i++){
players+='<tr>
<td>
<audio preload="none" id="myAudio_'+i+'" src="'+songs[i]+'" type="audio/mpeg"</audio>
<img src="play.png" width=30 height=30 border="0" onclick="play_pause(\'myAudio_'+i+'\')";>
</td>
</tr>';
}
players+="</table>"
document.getElementById('myTable').innerHTML=players;
和您的html
<body> <div id='myTable'></div> </body>
这篇关于带有音频标签的多个播放/暂停按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
