防止多个音频同时播放在JavaScript中。

huangapple go评论70阅读模式
英文:

prevent sevral audios from playing at the same time in JavaScript

问题

I'm challenging my self to build this mini music app with no tutorials, but I'm having a lot of problems, so for now I'm trying to play each song by clicking on the name of the song.

const btns = Array.from(document.querySelectorAll('.song-details'));
const music = [
    {
    img: 'img/2.jpg',
    id:1,
    songName: 'Am I Wrong',
    audio : new Audio('audio/Am-I-wrong.mp3'),
    lyrics: 'Am I wrong lyrics',
    btn: btns[1]
    },
    {
    img: 'img/3.jpg',
    id:2,
    songName: 'Sex,Drugs,Etc',
    audio : new Audio('audio/Sex-Drugs-Etc.mp3'),
    lyrics: 'Way Down We Go',
    },
    {
    img: 'img/7.jpg',
    id:3,
    songName: 'Me Myself & I ',
    audio : new Audio('audio/Me-Myself-I.mp3'),
    lyrics: 'Me Myself & I lyrics',
    },
    {
    img: 'img/4.jpg',
    id:4,
    songName: 'Blood In The Water',
    audio : new Audio('audio/Blood-In-The-Water.mp3'),
    lyrics: 'Blood In The Water lyrics',  
    },
    {
    img: 'img/3.jpg',
    id:5,
    songName: 'Eastside',
    audio : new Audio('audio/Eastside.mp3'),
    lyrics: 'Eastside lyrics',
    },
    {
    img: 'img/6.jpg',
    id:6,
    songName: 'Everything Black ',
    audio : new Audio('audio/Everything-Black.mp3'),
    lyrics: 'Everything Black  lyrics',
    },
]

const btnsLoop = () => {
    for (j = 0; j < btns.length; j++) {
        const musicObject = music[j];
        const { img, id, songName, audio, lyrics } = musicObject;
        
        btns[j].addEventListener('click', () => {
          
            if(musicObject.audio.paused && musicObject.audio.currentTime > 0 &&  !musicObject.audio.ended) {
                musicObject.audio.play();
             } else {
                musicObject.audio.pause();
             }
        })
    }
}

btnsLoop();

(Note: The provided code has been translated, and the code itself is not translated.)

英文:

I'm challenging my self to build this mini music app with no tutos, but I'm having a lot of problemes, so for now I'm trying to play each song by clicking on the name of the song
I've built this array of objects and the function the play it but I can't use .paused in the if condition to check if there is any song playing

const btns = Array.from(document.querySelectorAll(&#39;.song-details&#39;));
const music = [
{
img: &#39;img/2.jpg&#39;,
id:1,
songName: &#39;Am I Wrong&#39;,
audio : new Audio(&#39;audio/Am-I-wrong.mp3&#39;),
lyrics: &#39;Am I wrong lyrics&#39;,
btn: btns[1]
},
{
img: &#39;img/3.jpg&#39;,
id:2,
songName: &#39;Sex,Drugs,Etc&#39;,
audio : new Audio(&#39;audio/Sex-Drugs-Etc.mp3&#39;),
lyrics: &#39;Way Down We Go&#39;,
},
{
img: &#39;img/7.jpg&#39;,
id:3,
songName: &#39;Me Myself &amp; I &#39;,
audio : new Audio(&#39;audio/Me-Myself-I.mp3&#39;),
lyrics: &#39;Me Myself &amp; I lyrics&#39;,
},
{
img: &#39;img/4.jpg&#39;,
id:4,
songName: &#39;Blood In The Water&#39;,
audio : new Audio(&#39;audio/Blood-In-The-Water.mp3&#39;),
lyrics: &#39;Blood In The Water lyrics&#39;,  
},
{
img: &#39;img/3.jpg&#39;,
id:5,
songName: &#39;Eastside&#39;,
audio : new Audio(&#39;audio/Eastside.mp3&#39;),
lyrics: &#39;Eastside lyrics&#39;,
},
{
img: &#39;img/6.jpg&#39;,
id:6,
songName: &#39;Everything Black &#39;,
audio : new Audio(&#39;audio/Everything-Black.mp3&#39;),
lyrics: &#39;Everything Black  lyrics&#39;,
},
]
const btnsLoop = () =&gt; {
for (j = 0; j &lt; btns.length; j++) {
const musicObject = music[j];
const { img, id, songName, audio, lyrics } = musicObject;
btns[j].addEventListener(&#39;click&#39;, () =&gt; {
`
if(musicObject.audio.paused &amp;&amp; musicObject.audio.currentTime &gt; 0 &amp;&amp;  !musicObject.audio.ended) {
musicObject.audio.play();
} else {
musicObject.audio.pause();
}
})
}
}
btnsLoop();

答案1

得分: 0

对于您特定的用例,一个可能的解决方案是首先暂停所有音频对象,然后播放所请求的音频。所以在click事件监听器的回调函数中,获取存储在music数组中的所有音频对象:

music.forEach(element => {
});

然后暂停它们:

music.forEach(element => {
    element.audio.pause();
});

这是一个简化的示例:

const btns = Array.from(document.querySelectorAll('.song-details'));
const music = [{
    id: 1,
    songName: 'Am I Wrong',
    audio: new Audio('https://download.samplelib.com/mp3/sample-12s.mp3'),
  },
  {
    id: 2,
    songName: 'Sex,Drugs,Etc',
    audio: new Audio('https://download.samplelib.com/mp3/sample-15s.mp3'),
  }
];

for (j = 0; j < btns.length; j++) {
  const musicObject = music[j];
  const {
    id,
    songName,
    audio
  } = musicObject;
  btns[j].addEventListener('click', () => {
    music.forEach(element => {
      element.audio.pause();
    });
    musicObject.audio.play();
  });
}
<button class="song-details">Song A</button>
<button class="song-details">Song B</button>
英文:

A possible solution for your specific use-case is to simply first pause all your audio objects and start playing the requested sound afterwards.

So in the click event listener's callback function get all audio objects stored inside the music array like:

music.forEach(element =&gt; {
});

and pause 'em:

music.forEach(element =&gt; {
element.audio.pause();
});

Here's a simplified example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const btns = Array.from(document.querySelectorAll(&#39;.song-details&#39;));
const music = [{
id: 1,
songName: &#39;Am I Wrong&#39;,
audio: new Audio(&#39;https://download.samplelib.com/mp3/sample-12s.mp3&#39;),
},
{
id: 2,
songName: &#39;Sex,Drugs,Etc&#39;,
audio: new Audio(&#39;https://download.samplelib.com/mp3/sample-15s.mp3&#39;),
}
];
for (j = 0; j &lt; btns.length; j++) {
const musicObject = music[j];
const {
id,
songName,
audio
} = musicObject;
btns[j].addEventListener(&#39;click&#39;, () =&gt; {
music.forEach(element =&gt; {
element.audio.pause();
});
musicObject.audio.play();
});
}

<!-- language: lang-html -->

&lt;button class=&quot;song-details&quot;&gt;Song A&lt;/button&gt;
&lt;button class=&quot;song-details&quot;&gt;Song B&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月11日 06:30:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/76222977.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定