文档章节

基于howler.js开发的音乐播放器

孟飞阳
 孟飞阳
发布于 2016/06/25 19:01
字数 467
阅读 174
收藏 5

        howler.js 是一个新的 JavaScript 库用于处理 Web 的音频,该库最初是为一个 HTML5 游戏引擎所开发,但也可用于其他的 Web 项目。 

        以下是我基于howler.js做的一个简单音乐播放器工具。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>音乐播放</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://goldfirestudios.com/proj/howlerjs/howler.min.js?v=1.1.28"></script>
	<script type="text/javascript">
	var sound;	
	var musics = ['330786.mp3', '332089_Beyond.mp3'];//请在同目录下放置两首音乐文件
	var currItem;

	function newSound(){
		sound = new Howl({
 			 autoplay: false,
  			 loop: false,
  			 volume: 0.5,
			  onend: function() {
			    console.log('Finished!');
			  }
		});
	}

	function play(){
		console.log("接着上次继续播放");
		sound.play();
	}
	function startplay(){
		if(sound !== undefined)sound.stop();
		newSound();
		currItem = 0;
		sound.urls([musics[0]]);
		console.log("开始播放:"+musics[currItem]);
		sound.play();
	}
	function next(){
		sound.stop();
		newSound();
		currItem = currItem+1;
		sound.urls([musics[currItem]]);
		console.log("播放下一首:"+musics[currItem]);
		sound.play();
	}
	function pre(){
		sound.stop();
		newSound();		
		currItem = currItem-1;
		sound.urls([musics[currItem]]);
		console.log("播放上一首:"+musics[currItem]);		
		sound.play();
		
	}
	function stop(){
		sound.stop();
		console.log("停止完成");
	}
	function pause(){
		sound.pause();
		console.log("暂停成功,点击开始播放将接着播放");
	}
	function volumn(vl){
		sound.volume(vl,null);
		console.log("现在音量是:"+vl);
	}
	function sprite(){
		console.log("当前总长度:"+sound._duration+",已播放:"+sound._activeNode().currentTime);
	}
	function mute(){
		sound.mute();
	}
	function unmute(){
		sound.unmute();
	}

	</script>

</head>
<body>
<input type="button" name="startplay" id="startplay" onclick="startplay();" value="从头开始播放">
<input type="button" name="play" id="play" onclick="play();" value="开始播放">
<input type="button" name="pause" id="pause" onclick="pause();" value="暂停播放">
<input type="button" name="stop" id="stop" onclick="stop();" value="停止播放">
<input type="button" name="sprite" id="sprite" onclick="sprite();" value="播放进度">
<input type="button" name="next" id="next" onclick="next();" value="播放下一首">
<input type="button" name="pre" id="pre" onclick="pre();" value="播放上一首">
<select id="volumn" onchange="volumn(this.value);">
	<option value="0.1">0.1</option>
	<option value="0.3">0.3</option>
	<option value="0.5">0.5</option>
	<option value="0.7">0.7</option>
	<option value="1.0">1.0</option>
</select>
<input type="button" name="mute" id="mute" onclick="mute();" value="静音">
<input type="button" name="unmute" id="unmute" onclick="unmute();" value="解除静音">
</body>
</html>

已实现的功能如下:

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 208
博文 981
码字总数 546304
作品 5
朝阳
个人站长
私信 提问
土狗音乐播放器 —— 基于 electron-vue 的音乐播放器

土狗音乐播放器是一个基于 electron-vue 开发的音乐播放器,界面模仿QQ音乐,技术栈electron-vue+vue+vuex+vue-router+element- UI。持续更新中,欢迎star...

王练
2018/07/30
1
0
Banshee 1.9.1 发布,增加字幕显示功能

Banshee 1.9.1 刚刚发布,这是一个开发版,2.0 之前的版本,增加了字幕显示功能。详情请看发行说明。 下载地址:banshee-1-1.9.1.tar.bz2 Banshee是一个跨平台的开放源代码媒体播放器。Bansh...

红薯
2010/12/21
639
0
推荐漂亮的flash网页MP3音乐播放器

文章来源:PHP开发学习门户 地址:http://www.php#thinking.com/archives/491 (去点#) 在网页制作中,如果想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时候网页音乐播放器...

PHP开发学习门户
2014/09/30
0
0
手把手教你做音乐播放器(一)功能规划

版权声明:本文为博主原创文章,禁止转载,违者必究。 https://blog.csdn.net/anddlecn/article/details/52594998 前言 学习完“计算器” “视频播放器” “蓝牙聊天”以后,对安卓应用的开发...

anddlecn
2016/09/20
0
0
那些适合日常使用的开源工具和应用(娱乐篇)

本系列文章将针对办公、设计、娱乐、教育等日常使用场景,进行一些开源工具和应用的推荐,希望能对大家有所帮助。优秀的实在太多,篇幅有限,仅列出部分,发现更多可以利用 OSC 的搜索工具。...

王练
2016/11/29
6.9K
13

没有更多内容

加载失败,请刷新页面

加载更多

《傲慢与偏见》的读书笔记与读后感作文2400字

《傲慢与偏见》的读书笔记与读后感作文2400字: 作者:孙苑馨;笔者按:读书这个习惯是我爸妈养出来的。小时候父母赚的钱除了吃饭穿衣剩下的就是买书了,他们除了买各种新鲜出版的文艺派图书...

原创小博客
23分钟前
1
0
oozie job 的挂了监控报警或重启

oozie Coordinator 的job 和actioni状态很多,但好像不支持设置某状态如failed后30分钟后自动重新拉启,因他的条件只有几种:触发条件可以是一个时间频率、一个dataset实例是否可用,或者可能...

hblt-j
41分钟前
1
0
python精简笔记-[6]-[if,for,while]语句

1.if 条件判断 语法: if 判断条件: 执行语句……elif 判断条件:    执行语句……elif 判断条件:    执行语句……else: 执行语句…… 实例1: n = input("请输...

平头哥-Enjoystudy
45分钟前
0
0
RxJava 是如何实现线程切换的(上)

前言 通过前一篇的从观察者模式出发,聊聊RxJava,我们大致理解了RxJava的实现原理,在RxJava中可以非常方便的实现不同线程间的切换。subscribeOn 用于指定上游线程,observeOn 用于指定下游线...

亭子happy
今天
2
0
想晋级高级工程师只知道表面是不够的!Git内部原理介绍

本文由云+社区发表 作者:腾讯工蜂用户:王二卫 从不一样的视角了解git,以便更好的使用git 一、git & git 版本库认识 git 是一个内容寻址的文件系统,其核心部分是一个简单的键值对数据库(...

腾讯云加社区
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部