<!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. spark MLlib Classification and regression 学习

    二分类:SVMs,logistic regression,decision trees,random forests,gradient-boosted trees,naive Bayes 多分类:  ...

  2. 我是如何用redis做实时订阅推送的

    前阵子开发了公司领劵中心的项目,这个项目是以redis作为关键技术落地的.       先说一下领劵中心的项目吧,这个项目就类似京东app的领劵中心,当然图是截取京东的,公司的就不截了...   其中 ...

  3. Java 使用blob对H5视频播放进行加密《java视频加密》

    1.创建一个H5 <video>标签 <video id="sound" type="video/mp4" controls="co ...

  4. 一份详细的asyncio入门教程

    asyncio模块提供了使用协程构建并发应用的工具.它使用一种单线程单进程的的方式实现并发,应用的各个部分彼此合作, 可以显示的切换任务,一般会在程序阻塞I/O操作的时候发生上下文切换如等待读写文件, ...

  5. 解决'SQLALCHEMY_TRACK_MODIFICATIONS adds significant overhead and '

    懒癌晚期,直接贴图 然后就解决了!

  6. Mybatis 通用 Mapper 和 Spring 集成

    依赖 正常情况下,在原有依赖基础上增加的 mapper-spring. <!-- https://mvnrepository.com/artifact/tk.mybatis/mapper-spr ...

  7. 重温TCP

    先放张TCP头图片 一.TCP三次握手目的: 1.保证源主机确定目的主机在线,并可进行通信 2.让源主机检查它是否正在监听试图去连接的端口 3.允许源主机向接收者发送他的起始序列号,使得两主机可以将数 ...

  8. NumPy数组对象

    1.创建NumPy数组 import numpy as np # 创建3*2*4的三维数组 a = np.arange(24).reshape(3, 2, 4) # 打印三维数组的所有元素 print ...

  9. c++11 线程池

    也可参考: https://www.cnblogs.com/ailumiyana/p/10016965.html *** https://blog.csdn.net/jlusuoya/article/ ...

  10. redis的编译安装

    参考文献 https://www.cnblogs.com/JiangLe/p/5878160.html https://www.cnblogs.com/stulzq/p/9288401.html re ...