Я новичок в этом сайте, и мне нужна помощь с моим проектом.Имейте в виду, что я не самый опытный программист, так что простите, если мой код кажется немного неаккуратным.
Я занимаюсь разработкой приложения, связанного с производством музыки, используя express.js.
На странице шоу я создаю мини-mp3-плеер для каждой песни в массиве, который вскоре станет базой данных.
В основном приложении я передаю массив URL-адресов песен в файл .ejs, который отображает аудиопроигрыватели.
"songs" - это массив URL-адресов 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-плеер воспроизводит последний звук в массиве.Я пытаюсь все, и я не очень далеко.Может кто-нибудь помочь мне с этим?