次のクリックでポーズソング、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; 
    } 
});

もう1つのオプションは、オーディオオブジェクトの配列を保持し、現在再生中のオーディオのインデックスをトラッキングすることです。それはこのように見えるかもしれません。これは、一時停止した曲の場所を保持するため、これが望ましい場合があります。

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

答えて

関連する問題