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(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
js+css3实现旋转效果
Jan 20 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
关于JavaScript回调函数的深入理解
Jun 27 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php array的学习笔记
2012/05/16 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
Javascript开发包大全整理
2006/12/22 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
python3大文件解压和基本操作
2017/12/15 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
电大自我鉴定范文
2013/10/01 职场文书
生日庆典策划方案
2014/06/02 职场文书
项目工作说明书
2014/07/29 职场文书
2015年电工工作总结
2015/04/10 职场文书
大学生就业意向书
2015/05/11 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL