带音频标签的多重播放/暂停按钮

时间:2015-03-26 11:51:27

标签: javascript html html5-audio

我在同一个代码中遇到多个播放/暂停按钮的问题,我有一个表格,其中有一个按钮,然后是右边单元格上的歌曲名称。

按钮工作正常,这是代码(从互联网上获取):

<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,但是,我必须在我的脚本上实现什么才能使我的页面正常工作?我已经尝试了很多东西,但不能真正让它按照我的意愿运作。 我非常感谢一些建议,提前谢谢。

Ps:现在对我来说不是必需的,但是如果使用代码我也可以获得音频的更改图标,我的意思是&#34; onclick&#34;我改变了暂停图标,谢谢!

1 个答案:

答案 0 :(得分:2)

你可以在这样的对象之间加以区别

    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个以上的玩家

   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>