html音频自动切换,JavaScript实现音乐自动切换和轮播实例教程

本文主要为大家详细介绍了JavaScript实现音乐自动切换和轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

前言：前两天有个同学问我音乐自动切换，并在所有歌曲都播放完成以后实现循环播放的效果。自己折腾了一下做了出来，今天整理桌面的时候突然看见，在拖到回收站的一瞬间想着还是写一篇博客分享一下。实现的方法有很多种，我这里简单的实现。

通过修改video的src(这种应该是最好节省资源的)

welcome

.content {

width: 600px;

margin:0 auto;

border:1px solid red;

}

.left-bar {

width: 300px;

height: 200px;

float: left;

border:1px solid red;

}

ul li {

list-style: none;

margin-top: 20px;

cursor: pointer;

}

li:hover {

color: orange;

}

• 十年
• 朋友
• 勇气

按钮

window.onload = function() {

// 歌曲列表

var music = [

{id: 1, name:"十年"},

{id: 2, name:"朋友"},

{id: 3, name:"勇气"}

]

// 记录当前是哪首歌曲

var currentMusic = 0;

// 获取DOM

var oVideo1 = document.querySelector("#video1");

// 初始化

oVideo1.src = music[0].name + '.mp3';

// 歌曲结束事件

oVideo1.onended = function() {

currentMusic += 1;

// 判断是否是最后一首

if(currentMusic === music.length) {

currentMusic = 0;

}

var sr = music[currentMusic].name + '.mp3';

this.src=sr;

}

// 获取左边歌曲列表的DOM

var aList = document.getElementsByClassName("music-name");

for(var i=0; i

// 为了知道具体是那一个li

aList[i].index = i;

// 给每一个li设定一个事件

aList[i].onclick = function() {

oVideo1.src = music[this.index].name + ".mp3";

}

}

}

相关推荐：