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(){&nbsp; &nbsp;song.src = songs[currentSong];&nbsp; &nbsp;songTitle.textContent = titles[currentSong];&nbsp; &nbsp;song.play();}&nbsp; &nbsp; &nbsp; &nbsp;function playOrPauseSong(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(song.paused){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;playSong();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#play img").attr("src","/images/Pause.png");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;song.pause();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#play img").attr("src","/Images/Play.png");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;song.addEventListener('timeupdate',function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#seekbar').attr("value", this.currentTime / this.duration);&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp;function next(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;currentSong++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(currentSong > songs.length - 1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;currentSong = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;playSong();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#play img").attr("src","/images/Pause.png");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#image img").attr("src",poster[currentSong]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#bg img").attr("src",poster[currentSong]);&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;function pre(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;currentSong--;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(currentSong < 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;currentSong = songs.length - 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;playSong();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#play img").attr("src","/images/Pause.png");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#image img").attr("src",poster[currentSong]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#bg img").attr("src",poster[currentSong]);&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;function countProgress(event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></audio><header id="about">&nbsp; &nbsp; <div class="menu">&nbsp; &nbsp; &nbsp; &nbsp; <span class="bar"></span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <nav class="nav">&nbsp; &nbsp; &nbsp; &nbsp; <div class="overlay">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="index.html">Home</a> </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a class=active href="Album.html">Album</a> </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="Gallery.html">Gallery</a> </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="Book.html">Book Us</a> </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </nav><div id="main">&nbsp; &nbsp; <div id="image">&nbsp; &nbsp; &nbsp; &nbsp; <img src="/images/J&G Logo.png"/>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="player">&nbsp; &nbsp; &nbsp; &nbsp; <div output id="songTitle"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="buttons">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="pre" onclick="pre()"><img src="/images/backwards.png"></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="play" onclick="playOrPauseSong()"><img src="/images/play.png"></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="next" onclick="next()"><img src="/images/forwards.png"></button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div><progress id="seekbar" value="0" max="1" style="width:200px;"></progress></div>