Question

嗨我一旦点击图像就设法播放并暂停一个mp3文件，问题是每当我选择另一个图像（这是为了播放不同的mp3歌曲）时，它会自动恢复同一首歌。< / p>

的Javascript

function StartOrStop(audioFile)
  {
    var audie = document.getElementById("myAudio");
    if(!audie.src)
       audie.src = audioFile;
    if(audie.paused == false)
     {
        audie.pause();
     }
     else
     {
       audie.play();
     }
  }

HTML

<img src="images/play.png" alt="Play Button" width="57" height="50" onclick="StartOrStop('RWY.mp3')">

<img src="images/play.png" alt="Play Button width="57" height="50" onclick="StartOrStop('EL.mp3')">

<audio controls id="myAudio" ></audio>

任何建议儿子我怎么能解决这个问题？

Answer 1

您没有在点击时分配新的src，而是先检查它是否存在。由于src已存在，因此永远不会将第二个文件分配给src。

修改

您应该检查是否audie.src === audioFile。

Answer 2

这种方法怎么样

<audio id="demo1" src="RWY.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo1').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo1').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo1').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo1').volume-=0.1">Decrease Volume</button>
</div> 
<audio id="demo2" src="EL.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo2').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo2').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo2').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo2').volume-=0.1">Decrease Volume</button>
</div>

而不是按钮，您只需更改标签即可使用图像。

Javascript歌曲播放和暂停

2 个答案: