在网页中,我们常常需要添加音乐播放器,这时候就需要实现上一首下一首歌的功能。下面是一段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属性,从而实现切换歌曲的功能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。