Я новичок на этом сайте и мне нужна помощь в моем проекте. Имейте в виду, что я не самый опытный программист, поэтому простите меня, если мой код кажется немного неряшливым.
Я разрабатываю приложение, связанное с производством музыки, используя express.js.
На странице показа я создаю мини-mp3-плеер для каждой песни в массиве, который скоро станет базой данных.
В основном приложении я передаю массив URL-адресов песен в файл.ejs, который отображает аудиоплееры.
"песни" - это массив mp3-адресов.
app.get("/homepage", function(req, res){
//rendering the homepage ejs
res.render("show.ejs", {songs:songs});
});
В файле.ejs я создаю mp3-плеер для каждой песни в массиве...
<% include partials/header %>
<div class="container" id="mainBody">
<div class="row text-center" style="display:flex; flex-wrap:wrap;">
<% songs.forEach(function(song){%>
<div class="col-md-4 col-sm-6">
....audio player display html....
Я написал функциональность для каждого mp3-плеера в js, под каждым объектом на этой странице. Я знаю, что это может показаться не самой идеальной вещью, но пока я просто попробую сделать эту работу.
...after html for object...
...javascript for functionality....
<% if(song) { %>
<script type="text/javascript">
window.onload = initAudioPlayer;
function initAudioPlayer(){
var track = new Audio();
track.src="<%=song%>";
//play/pause function
document.getElementById("switchId").addEventListener("click", function(){
if(track.paused){
track.play();
$('#switchId .fa').toggleClass('fa fa-play fa fa-pause');
}else{
track.pause();
$('#switchId .fa').toggleClass('fa fa-pause fa fa-play');
}
});
}
</script>
<% } %>
Когда я запускаю этот код, он отображает нужное количество аудиоплееров (2 песни = 2 мини-mp3-плеера). Однако, когда функциональность работает только на первом mp3-плеере. Когда я пытаюсь щелкнуть игру на других, это не работает. Кроме того, mp3-плеер, который работает, воспроизводит последний звук в массиве. Я пытаюсь все, и я не очень далеко. Может кто-то, пожалуйста, помогите мне с этим?
Я могу заметить две проблемы:
Вероятно, это зависит от браузера, но:
document.getElementById("switchId")
Идентификаторы должны быть уникальными; если у вас есть несколько элементов с именем switchId
вероятно, ваш браузер только switchId
первый.
Проблема в:
window.onload = initAudioPlayer;
Это выполняется один раз для каждого MP3-плеера на вашей странице, но функция onload
только вызывается позже, когда окно полностью загружено. Таким образом, он запускает только последний, который вы назначили (так как он перезаписал все предыдущие).