<!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. EHDU-1039 asier Done Than Said?

    Password security is a tricky thing. Users prefer simple passwords that are easy to remember (like b ...

  2. readonly与disabled的区别

    一. 范围不同 readonly 只对 <input> 和 <textarea> 标签有效 disabled 对所有表单元素都有效, 包括:<input>, < ...

  3. /var/spool/clientmqueue目录~清理

    今天nagios报警,一台服务器的disk满了,使用du -sh * 或 du -sh /* 查看目录的大小,查找占用空间大的目录/var/spool/clientmqueue.... 然后我就想/v ...

  4. Apache Flink系列（1）-概述

    一.设计思想及介绍 基本思想:“一切数据都是流,批是流的特例” 1.Micro Batching 模式 在Micro-Batching模式的架构实现上就有一个自然流数据流入系统进行攒批的过程,这在一定 ...

  5. javascript基础常识了解一下

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 正则RegExp序2

    1.var reg=/./     var reg=/\./ 前者代表任意一个字符而后面代表这个字符串中得有一个. 2.?的使用 如果单独的一个字符后面带? var reg=/\d?/ /n?/ 代表 ...

  7. Visual Studio 2012编译的程序无法在XP下运行的解决办法【转】

    最近看到一篇<Windows编程革命简史>,想到以前刚开始用VS2012的时候,编译的程序在其他人那无法运行,一查才知道是VS2012本身不支持XP.当然现在微软早已在VS2012 Upd ...

  8. Lecture4_1&4_2.多维随机变量及其概率分布

    1.二维随机变量(X,Y)的联合分布函数: F(x,y)=P(X≤x,Y≤y) 2.二维随机变量(X,Y)关于X的边缘分布函数: FX(x)=P(X≤x) =P(X≤x,Y<+∞) =F(x,+ ...

  9. 对于EMC DAE、DPE、SPE、SPS的解释

    对于EMC DAE.DPE.SPE.SPS的解释: DAE: Disk Array Enclosure 单一的磁盘扩展单元 CX200/CX300/CX400/CX500CX600/CX700 DPE ...

  10. WithOne 实体关系引起 EF Core 自动删除数据

    最近遇到了一个 EF Core 的恐怖问题,在添加数据时竟然会自动删除数据库中已存在的数据,经过追查发现是一个多余的实体关系配置引起的. modelBuilder.Entity<Question ...