html 在不同音频文件之间切换

我已经离开网络开发一段时间了，最近我一直在做一个音乐播放器应用程序，可以快进和倒带歌曲，但我在这方面遇到了麻烦。我如何设置我的快进按钮转到下一首歌（即，实际上它应该发挥作用）和/或点击倒带/后退按钮时返回到前一首歌。请帮助。谢谢。

var track1 = document.getElementsByClassName('track1')
var track2 = document.getElementsByClassName('track2')
var track3 = document.getElementsByClassName('track3')
var track4 = document.getElementsByClassName('track4')
var track5 = document.getElementsByClassName('track5')
var track6 = document.getElementsByClassName('track6')

function foward() {
    if (track1 == document.getElementsByClassName('track1'))
    


}

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: rgba(245, 245, 36, 0.931);
}

.container{
    position: absolute;
    left: 300px;
    top: 70px;
    width: 600px;
    height: 650px;
    background-image:linear-gradient(360deg, rgba(245, 88, 167, 0.129), rgba(246, 37, 180, 0.524));
    box-shadow: rgba(0, 0, 0, 0.634) 2px 10px 90px;
    border-radius: 10%;
} 
h1 {
    text-align: center;
    margin-top: 50px;
    color: yellow;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
}
.song {
    border-radius: 50%;
    width: 230px;
    height: 230px;
    position: absolute;
    top: 25%;
    left: 30%;
    box-shadow: rgba(0, 0, 0, 0.396) 1px 8px 5px;
    animation: rotate 15s infinite linear;

}

@keyframes rotate {
    from{ transform:rotate(-360deg);}
    to { transform: rotate(360deg);}
}

.title {
    color: yellow;
    text-align: center;
    position: relative;
    top: 20px;
}
audio {
    position: relative;
    top: 390px;
    left: 135px;
}
button {
    border-radius: 50%;
    border: none;
    width: 50px;
    height: 50px;
    margin: 120px;
    margin-top: 40%;
    background-color: rgba(255, 255, 255, 0.251);
    box-shadow: rgba(1, 1, 1, 0.456) 1px 1px 10px 2px;
}
.foward, .pause, .back{
    background-size: 50px;
    background-repeat: no-repeat;
    background-color: rgba(254, 138, 95, 0.322);
    
    
}
.foward{
    background-image: url();
}
.back {
    background-image: url();
    background-size: 35px;
}
.pause {

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Now playing</h1>
        <img class="song"src="Phil_Collins_-_Face_Value_2016.jpg">
        <h3 class="title">In the air tonight - Phil Collins</h3>
        
        <div>
            <audio  controls>
                <source class="track1" src="Phil_Collins_-_In_The_Air_Tonight_CeeNaija.com_.mp3">
                <source class="track2" src="blue-oyster-cult-burnin-for-you-1-17.mp3">
                <source class="track3" src="prince-the-revolution-kiss.mp3">
                <source class="track4" src="lenny-kravitz-fly-away.mp3">
                <source class="track5" src="blondie-call-me.mp3">
                <source class="track6" src="the-clash-rock-the-casbah.mp3">
            </audio>
            
        </div>

        <div>
        <button class="back"></button>
    
        <button class="foward" onclick="foward()"></button>
    </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

所以我明白你想要的是基本上有一个按钮，让你去上一首/下一首歌。首先，你可以尝试创建一个变量，为当前播放的歌曲。

var current_song = 1

然后，你可以简单地将你的函数“forward”改为这样：

function forward() {
    if (current_song == 6) {
        current_song = 1
    } else {
           current_song++
    }
// Then you can actually play the song
your_play_song_function("track" + current_song.toString())
}

相反的函数也是如此：

function backward() {
    if (current_song == 1) {
        current_song = 6
    } else {
           current_song--
    }
your_play_song_function("track" + current_song.toString())
}

顺便说一下，我个人建议使用Javascript的内置类Audio（），因为即使它在HTML页面上不可见，你也可以制作一个按钮来播放歌曲。创建和播放歌曲的示例：

const track1 = new Audio("path_to_audio_src")
track1.play();

html 在不同音频文件之间切换

1条答案

相关问题

热门标签

最新问答