JavaScript实现音乐自动切换和轮播


Posted in Javascript onNovember 05, 2017

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

通过修改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>

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

Javascript 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
vue+node+webpack环境搭建教程
Nov 05 #Javascript
JavaScript实现三级级联特效
Nov 05 #Javascript
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 #Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 #Javascript
You might like
PHP中的日期加减方法示例
2014/08/21 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
python自动化发送邮件实例讲解
2021/01/04 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
二年级评语大全
2014/04/23 职场文书
大学学习计划书范文
2014/05/02 职场文书
政协调研汇报材料
2014/08/15 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android