我正在尝试使用 javascript 将 h2 标签更改为所选歌曲的标题

我正在尝试将带有 id 标题的 h2 标签更改为名称变量。我希望它随着相应的歌曲而改变，但我似乎无法正确处理。当用户单击下一首歌曲时，我想使用当前歌曲名称更新 h2 标签。

var songList = ["audio/classic.mp3", "audio/rococo.mp3", "audio/test.mp3"];
var name = ["One", "Two", "Three"];
var music = new Audio(songList);
var currentSong = 0;
window.onload = Jukebox;
function Jukebox() {
    music.src = songList[currentSong];
    music.play();
}
function togglePlay() {
    return music.paused ? music.play() : music.pause();
};
function stop() {
    music.pause();
}
function nextSong() {
    currentSong++;
    if (currentSong > 2) {
        currentSong = 0;
    }
    Jukebox();
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Jukebox.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
</head>
<body>
    <header>
    </header>
    <main>
        <header>
        </header>
        <main>
            <div class="container">
                <h2 id="title"></h2>
                <div class="page0ne">
                    <button onclick="togglePlay()" class="pause"><h1>Play</h1></button>
                    <button onclick="stop()" class="stop"><h1>Stop</h1></button>
                    <button onclick="nextSong()" id="next"><h1>Next</h1></button>
                </div>
            </div>
        </main>
        <footer>
        </footer>
    </main>
    <footer>
        <script src="Jukebox.js"></script>
    </footer>
</body>
</html>

我不确定这是否是您正在寻找的，但您可以简单地更新标题 h2 标签中的歌曲名称，如下面的代码片段所示。如果有帮助，请告诉我。

var songList = ["audio/classic.mp3", "audio/rococo.mp3", "audio/test.mp3"];
var nameList = ["One", "Two", "Three"];
var music = new Audio(songList);
var currentSong = 0;
window.onload = Jukebox;
function Jukebox() {
    // Update value of title by the name of the song
    document.getElementById("title").innerHTML = nameList[currentSong];
    music.src = songList[currentSong];
    music.play();
}
function togglePlay() {
    return music.paused ? music.play() : music.pause();
};
function stop() {
    music.pause();
}
function nextSong() {
    currentSong++;
    if (currentSong > 2) {
        currentSong = 0;
    }
    Jukebox();
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Jukebox.css">
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
</head>
<body>
    <header>
    </header>
    <main>
        <header>
        </header>
        <main>
            <div class="container">
                <h2 id="title">Song Name</h2>
                <div class="page0ne">
                    <button onclick="togglePlay()" class="pause"><h1>Play</h1></button>
                    <button onclick="stop()" class="stop"><h1>Stop</h1></button>
                    <button onclick="nextSong()" id="next"><h1>Next</h1></button>
                </div>
            </div>
        </main>
        <footer>
        </footer>
    </main>
    <footer>
        <script src="Jukebox.js"></script>
    </footer>
</body>
</html>

相关内容

最新更新

热门标签：