<!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实现音频播放器的更多相关文章

  1. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  2. 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...

  3. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  4. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

  5. 基于canvas和Web Audio的音频播放器

    wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你能够使用它来制作各种HTML5音频播放器,它能够在各种支持 Web A ...

  6. IOS开发之简单音频播放器

    今天第一次接触IOS开发的UI部分,之前学OC的时候一直在模拟的使用Target-Action回调模式,今天算是真正的用了一次.为了熟悉一下基本控件的使用方法,和UI部分的回调,下面开发了一个特别简易 ...

  7. html5 简单音乐播放器

    html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  8. HTML5动画图片播放器 高端大气

    我们见过很多图片播放插件(焦点图),很多都基于jQuery.今天介绍的HTML5图片播放器很特别,它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动.打散. ...

  9. 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

随机推荐

  1. python下载大文件

    1. wget def download_big_file_with_wget(url, target_file_name): """ 使用wget下载大文件 Note: ...

  2. Python运算符——复合运算符

    就相当于算数运算符的后面加一个“=” 例:+= num = num+5   可以写成  num += 5 就是说,等式右边含有左边的变量名,就可以直接去掉,然后右边的符号移到左边去 同样的“-=  / ...

  3. newinstance和new的区别

    newinstance将对象创建分为两个步骤,解耦的手段,先调用class.forName加载类,然后再去实例化它 new可以不用加载,不是一定 newinstance作为依赖注入 https://b ...

  4. Beta(6/7)

    鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...

  5. npm那些事儿

    npm,Node Package Manager,是node.js的模块依赖管理工具,安装nodejs时,一般会附带npm包管理工具. 一.npm相关1.npm的用途 能解决NodeJS代码部署上的很 ...

  6. Team

    队名 正义联盟 团队成员 211606301 蔡振翼(队长) 211606445 肖志豪 211606382 吴文清 211606370 刘华强 211605240 谢孟轩 211614269 林凯 ...

  7. django——模型层之多表操作

    django的多表操作 1.使用场景 在实际生产过程多,我们面对的数据纷繁复杂,此时就需要良好的数据结构设计,多表之间的约束关系为我们提供了数据管理以及查询的便利.在MYsql中我们利用外键(fore ...

  8. JS编码方式

    1. escape(): 采用unicode字符集对指定的字符串除0-255以外进行编码.所有的空格符.标点符号.特殊字符以及更多有联系非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符 ...

  9. Java 常见异常种类

    Java Exception: 1.Error 2.Runtime Exception 运行时异常3.Exception 4.throw 用户自定义异常 异常类分两大类型:Error类代表了编译和系统 ...

  10. __x__(22)0907第四天__ 垂直外边距重叠

    外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...