JavaScript Musi c Player (индикатор выполнения + ошибка названия трека)

Question

Я отправил несколько вопросов, чтобы попытаться закончить проигрыватель musi c, и пришел к выводу, что мне нужно переписать свой код. С этим кодом fre sh он стал намного более плавным, и теперь я верю, что мои ошибки - это простое исправление, я просто не уверен, что это такое. Я предоставлю короткое видео вместе с объяснением и кодом ниже. Спасибо за любой вклад и объяснения, где я ошибся!

Итак, при загрузке / обновлении страницы sh трек 1 называется «Send Me On My Way», который можно увидеть в HTML. Однако это не будет воспроизводить песню. Дорожка 1 (или другие) будет воспроизводиться следующими функциями (nextSong / previousSong). После этого отобразится track1.mp3 (а не название). Я пытался отредактировать названия песен в файле, но они не воспроизводились.

Это моя основная проблема, связанная с правильной настройкой проигрывателя. Наконец, я надеялся добавить некоторые функции к индикатору выполнения, позволив пользователю пропускать песню, что не совсем необходимо, но если это простое редактирование, которое будет оценено.

Изображение ниже https://imgur.com/a/oFuBKLY

и сценарий

var songs = ["/music/Track1.mp3", "/music/Track2.mp3", "/music/Track3.mp3", "/music/Track4.mp3", "/music/Track5.mp3", "/music/Track6.mp3", "/music/Track7.mp3"];
var poster = ["/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png"];

var songTitle = document.getElementById("songTitle");
var fillBar = document.getElementById("fill");

var song = new Audio();
var currentSong = 0;


function playSong(){

   song.src = songs[currentSong];

   songTitle.textContent = songs[currentSong];

   song.play();
}
       function playOrPauseSong(){

           if(song.paused){
               song.play();
               $("#play img").attr("src","/images/Pause.png");
           }
           else{
               song.pause();
               $("#play img").attr("src","/Images/Play.png");
           }
       }

       song.addEventListener('timeupdate',function(){

           var position = song.currentTime / song.duration;

           fillBar.style.width = position * 100 +'%';
       });


       function next(){

           currentSong++;
           if(currentSong > 6){
               currentSong = 0;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }

       function pre(){

           currentSong--;
           if(currentSong < 0){
               currentSong = 6;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }

Answer 1

Я создал небольшой пример на основе вашего кода с индикатором выполнения и очень простыми c логами выбора заголовка c. Я исправил проблемы с первым игровым действием и первым заголовком. Вы можете обратиться к w3schools , где вы можете найти больше примеров событий и атрибутов для тега.

var songs = ["https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3"];
var poster = ["/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png"];
var titles = ["I'm On My Way", "Rolling In The Deep", "Mad World", "Too Close", "Feelin' Good", "I Will Wait", "All These Things That I've Done"]

var songTitle = document.getElementById("songTitle");
var fillBar = document.getElementById("fill");

var song = new Audio();
var currentSong = 0;
songTitle.textContent = titles[currentSong];

function playSong(){

   song.src = songs[currentSong];

   songTitle.textContent = titles[currentSong];

   song.play();
}
       function playOrPauseSong(){
           if(song.paused){
               playSong();
               $("#play img").attr("src","/images/Pause.png");
           }
           else{
               song.pause();
               $("#play img").attr("src","/Images/Play.png");
           }
       }

       song.addEventListener('timeupdate',function(){
          $('#seekbar').attr("value", this.currentTime / this.duration);
       });


       function next(){
           currentSong++;
           if(currentSong > songs.length - 1){
               currentSong = 0;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }

       function pre(){
           currentSong--;
           if(currentSong < 0){
               currentSong = songs.length - 1;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }
       
       function countProgress(event) {
          
       }