代码之家 › 专栏 › 技术社区 › foreverNoob

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

global-variables dom html javascript

foreverNoob · 技术社区 · 7 年前

我正在尝试将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>

1 回复 | 直到 7 年前

Aman Chhabra 7 年前

我不确定,如果这是你正在寻找的,但你可以简单地在标题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>