英文:
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('.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();
答案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 => {
});
and pause 'em:
music.forEach(element => {
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('.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();
});
}
<!-- language: lang-html -->
<button class="song-details">Song A</button>
<button class="song-details">Song B</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论