文档章节

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

孟飞阳
 孟飞阳
发布于 2016/06/25 19:01
字数 467
阅读 105
收藏 5
点赞 0
评论 0

        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>

已实现的功能如下:

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 202
博文 893
码字总数 530681
作品 5
朝阳
个人站长
Banshee 1.9.1 发布,增加字幕显示功能

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

红薯 ⋅ 2010/12/21 ⋅ 0

推荐漂亮的flash网页MP3音乐播放器

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

PHP开发学习门户 ⋅ 2014/09/30 ⋅ 0

那些适合日常使用的开源工具和应用(娱乐篇)

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

王练 ⋅ 2016/11/29 ⋅ 13

极速后台开发框架 - xzyn

xzyn5.1 极速后台开发框架,基于ThinkPHP5.1.10+Bootstrap开发。 主要特性 基于Auth验证的权限管理系统 支持无限级父子级权限继承,父级的管理员可任意增删改子级管理员及权限设置 支持单管理...

戏中有你 ⋅ 05/08 ⋅ 0

深度音乐

简介 深度音乐(英文名:Deepin Music)是deepin团队开发的一款美观易用的音乐播放器。 深度音乐使用基于GTK开发的Deepin UI开发,支持换肤功能,提供本地、在线音乐播放,支持音频格式转码和...

Hallucination ⋅ 2014/01/15 ⋅ 0

手把手教你做音乐播放器(一)功能规划

前言 学习完“计算器” “视频播放器” “蓝牙聊天”以后,对安卓应用的开发我们基本上就入门70%了。 现在,我们将在之前学习的基础上,进一步完善我们要掌握的安卓开发技术,开发一个“音乐...

anddlecn ⋅ 2016/09/20 ⋅ 0

分享7个漂亮的HTML5视频音频播放器及源码

网页视频音频播放器大家并不陌生,在IE中我们可以运行ActiveX来嵌入微软的Media Player或者其他的本地播放器,当然可能大部分我们都是使用Flash来制作播放器。在HTML5发展迅速的今天,让我们...

tp_wire ⋅ 2012/07/11 ⋅ 5

KaOS 2017.11 发布,引入 Elisa 作为默认音乐播放器

KaOS 2017.11 已发布。除了使用最新的 Plasma Desktop(版本 5.11.3)之外,KaOS 2017.11 还引入了 Elisa 作为默认的音乐播放器。此版本将 Elisa 作为默认音乐播放器。KaOS 用户在最近一次调...

局长 ⋅ 2017/11/20 ⋅ 3

Qmmp 0.7.1 发布,Qt 开发的音乐播放器

Qmmp 0.7.1 是一个维护版本,修复了小 bug 和小改进。 qmmp 是 Linux 下一个音乐播放器,基于 Qt 库开发,该播放器有着跟 winamp 和 xmms 很相似的操作界面。...

oschina ⋅ 2013/06/02 ⋅ 3

Qmmp 0.7.2 发布,Qt 开发的 Linux 音乐播放器

Qmmp 0.7.2 是一个小维护版本,主要是 bug 修复和小改进。 qmmp 是 Linux 下一个音乐播放器,基于 Qt 库开发,该播放器有着跟 winamp 和 xmms 很相似的操作界面。...

oschina ⋅ 2013/08/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部