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学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
原生JS实现幻灯片
Feb 22 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 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中把有符号整型转换为无符号整型方法
2015/05/27 PHP
微信自定义分享php代码分析
2016/11/24 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
jquery cookie插件代码类
2009/05/26 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
package.json文件配置详解
2017/06/15 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python同步遍历多个列表的示例
2019/02/19 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python实现坦克大战
2020/04/24 Python
Python控制台实现交互式环境执行
2020/06/09 Python
小学教师学期末自我评价
2013/09/25 职场文书
低碳环保倡议书
2014/04/14 职场文书
信息合作协议书
2014/10/09 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
谢师宴答谢词
2015/01/05 职场文书
台风停课通知
2015/04/24 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python