<!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. 项目之初的模型设计与status状态字段

    0X01 开始做一个app的时候,要先做的是流程设计与数据库模型设计. 但做的模型设计往往是设置字段满足当前的需求,缺乏足够的经验,即使为以后的功能预留出位置,也无法考虑周全. 比如,刚开始做用户表, ...

  2. Codeforces.1043F.Make It One(DP 容斥)

    题目链接 \(Description\) 给定\(n\)个数\(A_i\),求最少选出多少个数,使得它们的\(\gcd\)为\(1\). \(n,A_i\leq3\times10^5\). \(Sol ...

  3. K个排序链表的合并（Hard）

    问题来源:选自leetCode 23:合并K个排序链表 问题描述: 题目给定信息: 不确定需要合并的链表的数目,但依然要求我们把给定的这些有序链表合并成一个链表,并且保证合并的链表依然是有序的. 问题 ...

  4. react中constructor()和super()的具体含义以及如何使用

    1.constructor()---super( )的基本含义 constructor()--构造方法 这是ES6对类的默认方法,通过new命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的 ...

  5. __x__(6)0905第二天__标签属性=“值”

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. vue_组件间通信：自定义事件、消息发布与订阅、槽

    自定义事件 只能用于 子组件 向 父组件 发送数据 可以取代函数类型的 props 在父组件: 给子组件@add-todo-event="addTodo" 在子组件: 相关方法中, ...

  7. [LeetCode] Transform to Chessboard 转为棋盘

    An N x N board contains only 0s and 1s. In each move, you can swap any 2 rows with each other, or an ...

  8. Linux安装nginx详细步骤

    安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 在/usr/local/下创建一个nginx的文件夹 ...

  9. java 实现文件上传下载以及查看

    项目的目录结构 代码  IOUtils.java package cn.edu.zyt.util; import java.io.IOException; import java.io.InputSt ...

  10. Java根据链接生成二维码

    Java根据链接生成二维码 相关 jar 包: core-3.1.0.jar 源码及 jar 包下载:http://files.cnblogs.com/files/liaolongjun/qrcode ...