下次点击时暂停歌曲，Javascript

Question

我有5个div框，它们在单击时播放特定轨道（使用数据属性），但是，我似乎无法弄清楚如何在下次单击时暂停上一个轨道。 音频彼此叠加播放。

使用Javascript：

var audio = ['song-1.mp3','song-2.mp3','song-3.mp3','song-4.mp3','song-
5.mp3'];

var music = document.querySelector('#container');

music.addEventListener('click', function(evt){
 if(evt.target.tagName === "DIV"){

 var index = evt.target.getAttribute('data-index');

 var sound = new Audio(audio[index]);
 sound.play();

 audio.forEach(function(x){
  if(x !== sound){
   sound.pause();
  }
 })

}

});

HTML：

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
    <title></title>
   <link rel="stylesheet" href="style.css"/>
  </head>
 <body>

  <section id="container">
    <div data-index="0"><p>40's</p></div>
    <div data-index="1"><p>50's</p></div>
    <div data-index="2"><p>60's</p></div>
    <div data-index="3"><p>70's</p></div>
    <div data-index="4"><p>80's</p></div>
    <div data-index="5"><p>90's</p></div>
    <div data-index="6"><p>2000's</p></div>
    <div data-index="7"><p>2010's</p></div>
  </section>


 <script src='script.js'></script>
</body>
</html>

Answer 1

sound将始终是指最近单击的声音，而不是以前播放过的声音。 最简单的解决方案可能是保持playing变量，以跟踪当前正在播放的音频对象。 这样，当播放新声音时，您可以暂停参考旧声音。 可能看起来像这样

var audio = ['song-1.mp3','song-2.mp3','song-3.mp3','song-4.mp3','song-
5.mp3'];

var music = document.querySelector('#container');

var playing = undefined;

music.addEventListener('click', function(evt){
  if(evt.target.tagName === "DIV"){

    var index = evt.target.getAttribute('data-index');

    var sound = new Audio(audio[index]);
    if (playing) playing.pause();
    sound.play();
    playing = sound;
  }
});

另一个选择是让您仅保留音频对象阵列并跟踪当前播放的音频的索引。 看起来可能像这样。 这可能是更好的选择，因为它可以保留暂停的歌曲。

var audioNames = ['song-1.mp3','song-2.mp3','song-3.mp3','song-4.mp3','song-
5.mp3'];
var audio = [];
for (var a in audioNames) {
    audio.push(new Audio(a));
}

var music = document.querySelector('#container');

var playingIndex = undefined;

music.addEventListener('click', function(evt){
  if(evt.target.tagName === "DIV"){

    var index = evt.target.getAttribute('data-index');

    var sound = audio[index];
    if (playing) audio[playingIndex].pause();
    sound.play();
    playingIndex = index;
  }
});

下次点击时暂停歌曲，Javascript

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-22 22:56:58

下次点击时暂停歌曲，Javascript

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-22 22:56:58

解决方案1
0 已采纳 2017-04-22 22:56:58