Question

我正在尝试将id标题的h2标记更改为name变量。我想用相应的歌曲改变它，我似乎无法做到正确。当用户点击下一首歌时，我想用当前歌曲名称更新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>

Answer 1

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

＆＃13;

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();
}

＆＃13;

<!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>

＆＃13;

我正在尝试使用javascript

1 个答案: