微信小程序制作步骤_JavaScript完成音乐主动切换和轮播

JavaScript实现音乐自动切换和轮播       这篇文章主要为大家详细介绍了JavaScript实现音乐自动切换和轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 e /title 
 style type="text/css" 
 .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;
 /style 
 /head 
 body 
 div 
 li 十年 /li 
 li 朋友 /li 
 li 勇气 /li 
 /ul 
 /div 
 div 
 video src="" id="video1" controls autoplay /video 
 button id="btn" 按钮 /button 
 /div 
 script 
 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 aList.length; i++) {
 // 为了知道具体是那一个li
 aList[i].index = i;
 // 给每一个li设定一个事件
 aList[i].onclick = function() {
 oVideo1.src = music[this.index].name + ".mp3";
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。

相关阅读