时间戳

首页 > 解决方案 > 重叠音乐 onclick + 最后点击的元素

javascript - 重叠音乐 onclick + 最后点击的元素

问题描述

我正在使用香草 javascript 写一个音乐画廊。每张照片播放不同的歌曲onclick。
目前，每次点击都会在后台重新启动歌曲，因此它可以播放多次。此外，所有照片都可以同时播放。
我试图弄清楚如何一次只播放一首歌曲并重新开始，onclick而不是自己播放。
我认为这样做的方法是获得最后一次点击事件，然后audio.pause()是所有其他歌曲，但似乎无法弄清楚如何做到这一点，希望得到一些帮助。
谢谢！

<div class="carousel">
  <ul>
    <li id="1" class="pic"><img onclick="playSong('Avengers')" src="/Users/library /.vscode/musicalGallery/1_1.jpg" alt="scenery"></li>
    <li id="2" class="pic"><img onclick="playSong('River')" src="/Users/library/.vscode/musicalGallery/2.jpg" alt="scenery"></li>
    <li id="3" class="pic"><img onclick="playSong('Sail')" src="/Users/library/.vscode/musicalGallery/3_3.jpg" alt="scenery"></li>
    <li id="4" class="pic"><img onclick="playSong('Warfare')" src="/Users/library/.vscode/musicalGallery/4.jpg" alt="scenery"></li>
    <li id="5" class="pic"><img onclick="playSong('Joni')" src="/Users/library/.vscode/musicalGallery/5_5.jpg" alt="scenery"></li>
    <li id="6" class="pic"><img onclick="playSong('Wait')" src="/Users/library/.vscode/musicalGallery/6_6.jpg" alt="scenery"></li>
    <li id="7" class="pic"><img onclick="playSong('Suzanne')" src="/Users/library/.vscode/musicalGallery/7_7.jpg" alt="scenery"></li>
    <li id="8" class="pic"><img onclick="playSong('Bones')" src="/Users/library/.vscode/musicalGallery/8_8.jpg" alt="scenery"></li>
  </ul>
</div>
</div>

function playSong(id) {
  var songSource = "/Users/library/Desktop/jqueryGallery/musicalGalleryMusic/" + id + ".mp3";
  var audio = new Audio(songSource);
  audio.play();
  audio.volume = 0.3;
};

标签： javascript

解决方案

您可以将音频播放器的范围超出您的功能。然后，您可以检查是否audio.paused为 false 以查看当前是否正在播放歌曲，并在更改src.

var audio = new Audio();
function playSong(id) {
  if (!audio.paused) {
    audio.pause();
  }
  audio.src = "/Users/library/Desktop/jqueryGallery/musicalGalleryMusic/" + id + ".mp3";
  audio.play();
  audio.volume = 0.3;
};

推荐阅读