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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
小程序实现投票进度条
Nov 20 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
JS实现手风琴特效
Nov 08 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php模板原理讲解
2013/11/13 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
幼儿园教师备课制度
2014/01/12 职场文书
初中教师业务学习材料
2014/05/12 职场文书
企业年度评优方案
2014/06/02 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
沈阳故宫导游词
2015/01/31 职场文书
办公室禁烟通知
2015/04/23 职场文书
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL
Python如何加载模型并查看网络
2022/07/15 Python