JS+html5制作简单音乐播放器


Posted in Javascript onSeptember 13, 2020

本教程为大家分享了JS音乐播放器的具体代码,供大家参考,具体内容如下

1.HTML

<audio> 标签定义声音,比如音乐或其他音频流。其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮。

几个主要的标签如下:

<div>  
 <h4 id="name">李玉刚 - 刚好遇见你</h4> 
 <br> 
<audio id="audio" src="F:\KuGou\李玉刚 - 刚好遇见你.mp3 " controls></audio><br/> 
</div> 
<br><br> 
<div> 
<button id="btn-play" >播放</button> 
<button id="btn-stop" >暂停</button> 
<button id="btn-pre" >上一首</button> 
<button id="btn-next" >下一首</button> 
</div> 
</div>

这里不提供CSS样式,只做功能说明。

2.js

var btn1 = document.getElementById("btn-play"); 
 btn1.onclick = function(){ 
   if(audio.paused){     
   audio.play(); 
  } 
 } 
 
<!--暂停--> 
var btn2 = document.getElementById("btn-stop"); 
 btn2.onclick = function(){ 
   if(audio.played){     
   audio.pause(); 
  } 
 } 
  
var music = new Array(); 
music = ["李玉刚 - 刚好遇见你","张杰 - 三生三世","朴树 - 平凡之路"];//歌单 
var num = 0; 
var name = document.getElementById("name"); 
 
 
<!--上一首--> 
var btn3 = document.getElementById("btn-pre"); 
btn3.onclick = function(){ 
  num = (num +2)%3; 
  audio.src = "music/"+music[num]+".mp3"; 
  name.innerHTML = music[num]; 
  audio.play(); 
 } 
  
<!--下一首--> 
var btn4 = document.getElementById("btn-next"); 
btn4.onclick = function(){ 
  num = (num +1)%3; 
  audio.src = "music/"+music[num]+".mp3"; 
  name.innerHTML = music[num]; 
  audio.play(); 
 }

这样就可以控制audio播放器的播放,暂停,上一首和下一首功能了。

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

Javascript 相关文章推荐
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
TypeScript入门-接口
Mar 30 #Javascript
如何编写jquery插件
Mar 29 #jQuery
基于JavaScript实现瀑布流效果
Mar 29 #Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 #Javascript
JS变量及其作用域
Mar 29 #Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 #Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python判断变量是否已经定义的方法
2014/08/18 Python
Python函数嵌套实例
2014/09/23 Python
itchat接口使用示例
2017/10/23 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
家长对小学生的评语
2014/01/28 职场文书
领班岗位职责范文
2014/02/06 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
社会实践活动总结报告
2014/04/29 职场文书
骨干教师事迹材料
2014/12/17 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android