javascript - <a> 文本链接上的内嵌音频播放/暂停

Question

到目前为止，我没有将我发现的几种不同方法拼凑在一起:

http://192.185.121.49/~steveobr/

我需要所有的语音演示像第一个“商业”一样工作

正如您在实时示例中看到的那样，每个链接当前都绑定(bind)到相同的功能。我可以为每一行编写一个不同的函数，但我认为在一个函数中有更好的方法来做到这一点。到目前为止，这是我的代码:

<script type="text/javascript">
  function playpauseMP3(){
    if(document.getElementById("mp3").paused){
      document.getElementById("mp3").play();
      document.getElementById('audio_text').innerHTML = 'Pause';
    }else{
      document.getElementById("mp3").pause();
    }
  }
</script>

<a id="mp3" title="Play/Pause" onclick="playpauseMP3();" href="#"><span id="audio_text">Commercial</span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3();" href="#"><span id="audio_text2">Narration</span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3();" href="#"><span id="audio_text3">Promo </span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3();" href="#"><span id="audio_text4">TV Affiliate</span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3();" href="#"><span id="audio_text5">Radio</span></a>

Answer 1

你可以试试这个:

function playpauseMP3(objAnchor){
   //if(objAnchor.paused){   // anchor tag is not having pause, play and pause methods
       //objAnchor.play();
       objAnchor.firstChild.innerHTML = 'Pause';      
   //}else{
       //objAnchor.pause();
   //}
}


<a id="mp3" title="Play/Pause" onclick="playpauseMP3(this);" audio="song1.mp3" href="#">
    <span id="audio_text">Commercial</span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3(this);" audio="song2.mp3" href="#">
    <span id="audio_text2">Narration</span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3(this);" audio="song3.mp3" href="#">
    <span id="audio_text3">Promo </span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3(this);" audio="song4.mp3" href="#">
    <span id="audio_text4">TV Affiliate</span></a> 
<a id="mp3" title="Play/Pause" onclick="playpauseMP3(this);" audio="song5.mp3" href="#">
    <span id="audio_text5">Radio</span></a>

<div style="display: none;">
<audio src="horse.ogg" controls>
</audio>

您可以轻松获取 anchor 标记及其子跨度，并且还可以更改文本。

播放音频请visit here了解详细信息。

使用单一功能播放不同音频的粗略想法如下:

function playpauseMP3(objAnchor){
    var audioElement = document.getElementByID('player');
    audioElement.setAttribute('src', objAnchor.getAttribute("audio"));
    audioElement.play();
}