用html5实现音频播放器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<h4 id="name">许佳慧 - 公主范</h4>
<br>
<audio id="audio" src="./music/许佳慧 - 公主范.mp3" controls autoplay></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>
<script>
//播放
var myaudio=document.getElementById("audio")
var btn1 = document.getElementById("btn-play");
btn1.onclick = function(){
if(myaudio.paused){
myaudio.play();
}
}
//<!--暂停-->
var btn2 = document.getElementById("btn-stop");
btn2.onclick = function(){
if(myaudio.played){
myaudio.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)%4;
myaudio.src = "./"+"music/"+music[num]+".mp3";
name.innerHTML = music[num]+".mp3";
myaudio.play();
}
//<!--下一首-->
var btn4 = document.getElementById("btn-next");
btn4.onclick = function(){
num = (num +1)%4;
myaudio.src = "./"+"music/"+music[num]+".mp3";
name.innerHTML = music[num]+".mp3";
myaudio.play();
}
</script>
</body>
</html>
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><div> <h4 id="name">许佳慧 - 公主范</h4><br><audio id="audio" src="./music/许佳慧 - 公主范.mp3" controls autoplay></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><script>//播放var myaudio=document.getElementById("audio")var btn1 = document.getElementById("btn-play");btn1.onclick = function(){if(myaudio.paused){ myaudio.play();}}//<!--暂停-->var btn2 = document.getElementById("btn-stop");btn2.onclick = function(){if(myaudio.played){ myaudio.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)%4;myaudio.src = "./"+"music/"+music[num]+".mp3";name.innerHTML = music[num]+".mp3";myaudio.play();}//<!--下一首-->var btn4 = document.getElementById("btn-next");btn4.onclick = function(){num = (num +1)%4;myaudio.src = "./"+"music/"+music[num]+".mp3";name.innerHTML = music[num]+".mp3";myaudio.play();}</script></body></html>
用html5实现音频播放器的更多相关文章
- HTML5 音频播放器-Javascript代码(短小精悍)
直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...
- 【jquery】一款不错的音频播放器——Amazing Audio Player
前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- Wavesurfer.js音频播放器插件的使用教程
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...
- 基于canvas和Web Audio的音频播放器
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你能够使用它来制作各种HTML5音频播放器,它能够在各种支持 Web A ...
- IOS开发之简单音频播放器
今天第一次接触IOS开发的UI部分,之前学OC的时候一直在模拟的使用Target-Action回调模式,今天算是真正的用了一次.为了熟悉一下基本控件的使用方法,和UI部分的回调,下面开发了一个特别简易 ...
- html5 简单音乐播放器
html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- HTML5动画图片播放器 高端大气
我们见过很多图片播放插件(焦点图),很多都基于jQuery.今天介绍的HTML5图片播放器很特别,它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动.打散. ...
- 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成
原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...
随机推荐
- tensorflow安装-【老鱼学tensorflow】
TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着基于数据流图的计算,Tensor ...
- bool值的底层应用场景
这里我们的if 或者while,还有and,or,not 等都是在内部调用一个对象的bool方法,然后返回True或者是False, a = [0, ] # a = [] # print(bool(a ...
- idea报错：Invalid bound statement (not found)
在配置MyBatis接口映射的Mapper.xml时,提示Invalid bound statement (not found)异常,就算是接口和xml名字相同,路径相同也无法找到,在网上找到了几种解 ...
- springmvc映射html文件以及解决乱码问题
<servlet-mapping> <servlet-name>jsp</servlet-name> <url-pattern>*.html</u ...
- [Error]Python虚拟环境报错 OSError: setuptools pip wheel failed with error code 2
mkvirtualenv py35 python新建虚拟环境报错,setuptools pip wheel failed with error code 2 刚好昨天在CentOS安装的时候也总是报s ...
- java 多态 向上 向下转型
向上转型 将子类对象当作父类对象 子类对象------>父类对象 先实例化子类 父类 父类对象 = 子类实例 package test2; class Father{ public vo ...
- Ubuntu安装并使用sogou输入法
1.下载搜狗输入法的安装包 下载地址为:http://pinyin.sogou.com/linux/ ,如下图,要选择与自己系统位数一致的安装包,我的系统是64位,所以我下载64位的安装包 2.按键C ...
- laravel之构造器操作数据库
使用构造器来查询的优点是可以方式sql注入 1.插入 2.修改数据库 3.删除 4.查询
- javascript的数组之map()
map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的回调函数后返回的结果.新数组 // ES6 let numbers = [1, 5, 10, 15]; let doubles ...
- PAT甲级1091 Acute Stroke【三维bfs】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805375457411072 题意: 求三维的连通块 思路: 简单b ...