JavaScript实现音乐自动切换和轮播
更新时间：2017年11月05日 15:12:21 作者：输出是最好的学习
这篇文章主要为大家详细介绍了JavaScript实现音乐自动切换和轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言：前两天有个同学问我音乐自动切换，并在所有歌曲都播放完成以后实现循环播放的效果。自己折腾了一下做了出来，今天整理桌面的时候突然看见，在拖到回收站的一瞬间想着还是写一篇博客分享一下。实现的方法有很多种，我这里简单的实现。
通过修改video的src（这种应该是最好节省资源的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>welcome</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 class="left-bar">
<ul>
<li class="music-name">十年</li>
<li class="music-name">朋友</li>
<li class="music-name">勇气</li>
</ul>
</div>
<div class="content">
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要对Array和String方法进行总结，每一部分总结后有实例代码，代码中黄色框方法不改变原数组。PS:所有实例结果均一一运行所得。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
下面小编就为大家带来一篇js精确的加减乘除实例，具有非常好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了JS解析url参数为json对象问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了javascript实现手动点赞效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
Ajax技术在web中应用的相当广泛,最近项目需要用到Ajax，由于主站所用的是Jquey，而某个栏目的开发用的是prototype，这样一来就必须对JS代码做调整了。2009-09-09
这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
一文详解JavaScript中的事件循环(event loop)机制
JavaScript中的事件循环（Event Loop）是一种重要的机制，用于管理异步代码的执行，它确保 JavaScript 单线程环境中的任务按照正确的顺序执行，同时允许异步操作如定时器、网络请求和事件处理，本将给大家详细的介绍一下JavaScript事件循环机制,感兴趣的朋友可以参考下2023-12-12
一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一,这篇文章主要给大家介绍了关于js利用reduce方法让你的代码更加优雅的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了JavaScript之clipboard用法详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了小程序云开发实战小结，本文详细的介绍了云开发以及环境的搭建和项目实践，非常具有实用价值，需要的朋友可以参考下2018-10-10
最新评论