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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
简单的jQuery入门指引
Jul 28 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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模板函数 正则实现代码
2012/10/15 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
工作人员思想汇报
2014/01/09 职场文书
三年级科学教学反思
2014/01/29 职场文书
会计自我鉴定
2014/02/04 职场文书
挂靠协议书范本
2014/04/22 职场文书
公司委托书怎么写
2014/08/02 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
tomcat下部署jenkins的方法
2022/05/06 Servers