<a> text link</a>上的内联音频播放/暂停

时间:2014-07-24 15:43:23

标签: javascript html audio

这是我到目前为止拼凑的一些我发现的不同方法:

http://192.185.121.49/~steveobr/

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

正如您在实际示例中所看到的,每个链接当前都与同一个功能相关联。我可以为每一行编写不同的函数,但我假设有一种更好的方法可以在一个函数中执行此操作。到目前为止,这是我的代码:

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

1 个答案:

答案 0 :(得分:0)

你可以试试这个:

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>

您可以轻松获取锚标记及其子跨度,也可以更改文本。

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

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

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