用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 ...
随机推荐
- 合并K个排序链表
合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [ 1->4->5, 1->3->4, 2->6 ] 输出: 1-&g ...
- Python 30分钟快速入门指南
学习地址 中文版:Python 30分钟入门指南 英文版:Learn X in Y minutes 学习时间 2019/03/10 19:00 - 19:32,多用了2分钟.
- fflush()函数:更新缓冲区
fflush()的作用是用来刷新缓冲区: fflush(stdin)刷新标准输入缓冲区,把输入缓冲区里的东西丢弃:stdin是standard input的缩写,即标准输入,一般是指键盘:标准输入缓冲 ...
- django——form组件
1.html表单概述 Django开发的是动态Web服务,而非单纯提供静态页面.动态服务的本质在于和用户进行互动,接收用户的输入,根据输入的不同,返回不同的内容给用户.返回数据是我们服务器后端做的,而 ...
- docker+ubuntu14.04+cuda7.0
参考链接: http://tleyden.github.io/blog/2014/10/25/docker-on-aws-gpu-ubuntu-14-dot-04-slash-cuda-6-dot-5 ...
- java列表数据基本操作
列表数据组基本的增删改查 package cn.edu.fhj.day002; import java.util.ArrayList; public class ArrList { // 定义一个主函 ...
- HttpHandler和ashx使用Session 出现未初始化异常
原因: HttpHandler和ashx要实现IRequiresSessionState接口才能访问Session信息 接口IRequiresSessionState: 指定目标 HTTP 处理程序需 ...
- iview menu组件手动收起与展开
本文主要介绍menu组件在有子菜单时如何手动的展开与收起. 展开: 在需要展开的地方先设置openname变量如this.openname = ["设置"]; 再在$nextTic ...
- Jquery常用的方法总结
1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...
- jmeter使用指南:jmeter无脑式指南
一:启动jmeter 二:添加线程组 三:添加 HTTP 请求 四:添加监听器 五:填写访问的域名,并保存 六:运行,查看结果 七:配置多线程.循环机制,进行压力测试