javascript - JavaScript音乐播放器(进度栏+轨道标题错误)

Question

我提出了一些问题，试图使音乐播放器完成工作，并得出结论，我需要重新编写代码。有了这个新鲜的代码，它变得更加流畅了，我现在相信我的错误是一个简单的修复程序，但我不确定它们是什么。我将在下面提供一个简短的视频以及说明和代码。感谢您对我哪里出错了的任何投入和解释!

因此，在页面加载/刷新后，track1的标题为“Send Me On My Way”(可以在HTML中看到)。但是，这不会播放歌曲。音轨1(或其他)将播放以下(nextSong / previousSong)功能。然后它将显示track1.mp3(不是标题)，我试图编辑文件中歌曲的名称，但后来没有播放。

这是使播放器按预期方式启动和运行的主要问题。最后，我希望通过允许用户跳过这首歌来向进度条添加一些功能，虽然这不是完全需要的，但是可以通过简单的编辑来实现。

下面的视觉
https://imgur.com/a/oFuBKLY

</audio>

<header id="about">
    <div class="menu">
        <span class="bar"></span>
    </div>
    <nav class="nav">
        <div class="overlay">
            <ul>
                <li><a href="index.html">Home</a> </li>
                <li><a class=active href="Album.html">Album</a> </li>
                <li><a href="Gallery.html">Gallery</a> </li>
                <li><a href="Book.html">Book Us</a> </li>
            </ul>
        </div>
    </nav>

<div id="main">
    <div id="image">
        <img src="/images/J&G Logo.png"/>
    </div>
    <div id="player">
        <div output id ="songTitle"  >Im On My Way</div>
            <div id="buttons">
                <button id="pre" onclick="pre()"><img src="/images/backwards.png"></button>
                <button id="play" onclick="playOrPauseSong()"><img src="/images/play.png"></button>
                <button id="next" onclick="next()"><img src="/images/forwards.png"></button>
        </div>
    </div>


    <div id="seek-bar">
        <div id="fill"></div>
        <div id="handle"></div>
    </div>
</div>

和脚本

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

我根据您的代码，进度条和非常基本的标题选择逻辑创建了一个小示例。我还修复了第一个播放 Action 和第一个标题问题。
您可以引用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) {
          
       }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</audio>

<header id="about">
    <div class="menu">
        <span class="bar"></span>
    </div>
    <nav class="nav">
        <div class="overlay">
            <ul>
                <li><a href="index.html">Home</a> </li>
                <li><a class=active href="Album.html">Album</a> </li>
                <li><a href="Gallery.html">Gallery</a> </li>
                <li><a href="Book.html">Book Us</a> </li>
            </ul>
        </div>
    </nav>

<div id="main">
    <div id="image">
        <img src="/images/J&G Logo.png"/>
    </div>
    <div id="player">
        <div output id="songTitle"></div>
            <div id="buttons">
                <button id="pre" onclick="pre()"><img src="/images/backwards.png"></button>
                <button id="play" onclick="playOrPauseSong()"><img src="/images/play.png"></button>
                <button id="next" onclick="next()"><img src="/images/forwards.png"></button>
        </div>
    </div>

<progress id="seekbar" value="0" max="1" style="width:200px;"></progress>
</div>