JavaScript音乐播放器（进度条+曲目标题错误）

Question

我发布了一些问题，试图完成一个音乐播放器，并得出结论，我需要重写我的代码。有了这个新的代码，它更加流畅，我现在认为我的错误是一个简单的修复，我只是不确定它们是什么。我将提供一个简短的视频以及下面的解释和代码。感谢您的任何输入和解释，我哪里出错了！因此，在页面加载/刷新时，track1的标题是“Send Me On My Way”，这可以在HTML中看到。但是，这不会播放歌曲。轨道1（或其他）将播放以下（下一首/上一首）功能。然后，它将显示 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;

Answer 1

我基于您的代码创建了一个小示例，其中包含进度条和非常基本的标题选择逻辑。我还修复了第一个播放动作和第一个标题问题。您可以参考 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>