html代码实现上一首下一首歌

在网页中，我们常常需要添加音乐播放器，这时候就需要实现上一首下一首歌的功能。下面是一段html代码，帮助你实现这个功能。

audio id="myAudio" controls>
      source src="song1.mp3" type="audio/mpeg">
      source src="song1.ogg" type="audio/ogg">
      Your browser does not support the audio element./audio>
    button onclick="previousSong()">
    上一首/button>
    button onclick="nextSong()">
    下一首/button>
    script>
    var songs = ['song1.mp3', 'song2.mp3', 'song3.mp3', 'song4.mp3'];
    var currentSong = 0;
    var audio = document.getElementById("myAudio");
function previousSong() {
      currentSong--;
  if (currentSong  0) {
        currentSong = songs.length - 1;
  }
      audio.src = songs[currentSong];
      audio.play();
}
function nextSong() {
      currentSong++;
      if (currentSong >
 songs.length - 1) {
        currentSong = 0;
  }
      audio.src = songs[currentSong];
      audio.play();
}
    /script>
    

以上代码中，我们首先添加了一个audio标签用于播放音乐，在标签中添加了source子标签用来指定音乐文件的路径和类型。接下来，我们添加了两个按钮分别实现上一首和下一首的功能。在脚本中，我们定义了一个数组来存放所有的音乐文件名，以及一个表示当前播放的音乐文件在数组中的下标变量currentSong。当上一首或下一首按钮被点击时，相应的事件处理函数会依次改变currentSong的值，并改变audio标签的src属性，从而实现切换歌曲的功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！