暂停点击下一首歌曲，使用Javascript

我有5个div框在点击播放某个曲目（使用数据属性），但是，我似乎无法弄清楚如何在下次点击时暂停上一曲目。音频相互重叠播放。暂停点击下一首歌曲，使用Javascript

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

来源

2017-04-22 FakeEmpire

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; 
    } 
});

来源

2017-04-22 22:56:58 Jordan

第一个解决方案像一个魅力工作！谢谢！ – FakeEmpire

没问题！请将此标记为其他用户接受的答案 – Jordan

暂停点击下一首歌曲，使用Javascript

回答

相关问题