用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 ...
随机推荐
- Maven安装配置（Windows10）
想要安装 Apache Maven 在Windows 系统上, 需要下载 Maven 的 zip 文件,并将其解压到你想安装的目录,并配置 Windows 环境变量. 所需工具 : JDK 1.8 M ...
- HDU 4283 You Are the One 【区间DP】
<题目链接> 题目大意: 有$n$个人排成一排要上台表演,每个人有一个屌丝值$pi$.第i个上台表演的人,他的不满意度为$(i-1)*p_i$.现在有一个类似于栈的黑屋子,你可以让某些人进 ...
- C# 错误集锦
①字段重复 js → qs 仔细 ② 代码臃肿 通过判断 资产类型zc_type来判断模块的显隐 实际在其中嵌入 <%=zc_type == "2"?"" ...
- Linq 动态组合排序（Lambda）
最近有个项目需要做一个排班的功能,需要对排班的数据按不同的规则进行排序:因为排序规则是动态变化的,所以不太适合放到数据库中(临时表)中处理: 所以考虑使用Linq的排序方式(按不同的条件判断条件组合排 ...
- ZooKeeper Getting Started Guide
http://zookeeper.apache.org/doc/trunk/zookeeperStarted.html What is ZooKeeper? ZooKeeper is a centra ...
- 百度API获取经纬度使用
首先通过百度地图,注册账号,然后申请密钥 http://lbsyun.baidu.com/apiconsole/key 搜索某个关键字 http://api.map.baidu.com/place/v ...
- angular.formJson()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ffmpeg日志调式
1.播放器打印输出调试日志:ffplay -v debug $URL2.播放器打开详细调试日志:./ffplay -loglevel 563.修改源码修改日志级别: 1)log.c中:stati ...
- 源码包安装mysql5.6
含有的命令:wget,tar,cp,groupadd,useradd,chown,service,chkconfig,exportsource,mysql_secure_installation,my ...
- java.text.DateFormat 线程不安全问题
java.text下的 DateFormat 是线程不安全的: 建议1: 1.使用threadLocal包装DateFormat(太复杂,不推荐) 2.使用org.apache.commons.lan ...