0

我已经设法在单击图像后立即播放和暂停 mp3 文件，问题是每次我选择另一个图像（这意味着播放不同的 mp3 歌曲）时，它都会自动恢复同一首歌曲。

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

任何建议我该如何解决这个问题？

4

2 回答 2

1

您不是src在点击时分配新的，而是首先检查它是否存在。第二个文件永远不会被分配，src因为src已经存在。

编辑

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

于 2013-03-23T17:45:19.403 回答
0

这种方法怎么样

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

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

于 2013-03-24T02:18:42.513 回答