现代浏览器的web音频javascript类库 - Howler.js

花花的技术 2013-02-07

日期：2013-2-6 来源：GBin1.com

浏览器这个玩意儿并不是个新鲜事，但是随着HTML5的发展激起了浏览器技术的巨大发展。但是浏览器上对于音频控制技术来说仍旧非常的落伍。庆幸的是 Google积极的开发和创建了web audio API，这使得基于浏览器的音频控制更加的简单并且直观。但是唯一的问题是浏览器兼容性支持问题！

今天我们将要介绍一款基于web audio API的javascript类库 - howler.js，能够帮助你快速简单全面的控制音频。最早这款JS类库是为web游戏设计开发的。它使用Google的web audio API，如果浏览器不支持的话，会自动fallback到HTML audio。你可以方便的将声音控制整合到你开发的网站，应用或者web游戏中去。如果你需要兼容老版本浏览器需要使用一些fallback，可以参考这篇文章：

跨浏览器的HTML5 Audio解决方案- Audio5js

主要特性

缺省使用Web Audio API
可以方便的fallback回HTML audio如果浏览器不支持
支持不同的音频文件格式来完整的支持不同浏览器
针对HTML5 Audio实现了缓存池
支持静音和音量控制
多声音的同时回放
方便定义声音特效
支持淡出淡入的播放
支持链接方法操作
不使用外部类库
轻量级7kb（压缩后2kb）

来源：现代浏览器的web音频javascript类库 - Howler.js

: 花花的技术

相关推荐

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为。<source src="./media/snow.ogg" type="audio.mpeg&

行吟阁 0喜欢 / 0评论 2020-05-30

【WebRTC】第二篇：采集音视频数据

在实现之前，我们要先了解采集音视频数据的一个非常重要的API—getUserMedia()。这个API会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。这个API现在的用法是。constraints

zhuiyuanqingya 0喜欢 / 0评论 2020-03-27

从零开始的HTML5之旅（三）

HTML5规定了一种通过audio元素包含音频的方法。audio能够播放声音文件和音频流。从上面的格式中我们可以知道，在实际应用中仅仅只需要用到Ogg格式和Mp3格式。??audio的属性、方法、事件和video基本一致，可以参考从零开始的HTML5之旅（

STPace 0喜欢 / 0评论 2020-03-14

HTML5 audio API事件

<!DOCTYPE html>. width:500px;var myaudio=new Audio();myaudio.src="data/imooc.mp3";myaudio.play();<!DOCTYPE ht

WebVincent 0喜欢 / 0评论 2020-03-04

html5_音视频元素_audio&video

autoplay：布尔值，设置为true后音视频会自动播放。metadata：只预加载音视频元数据。如媒体字节数、第一帧、播放列表、持续时间等。视频不可用时同样显示它。width、height：只对<video>元素有效，指定视频播放器的宽高。

黎豆子 0喜欢 / 0评论 2020-02-18

HTML5隐藏播放器播放背景音乐

一个客户要求给网站添加一个背景音乐，我用的是html5添加网页背景音乐的代码，在此记录一下以后有用。html5方法二：<videocontrols=""autoplay=""name="media&q

玫瑰小妖 0喜欢 / 0评论 2020-01-24

audio标签、HOVER效果、rgba和opacity、隐藏场景

HTML5里引入的新标记 <audio> 和 <video> 实现了HTML对视频播放和音频播放的原生支持，有了这种原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，而直接能将视频/音频嵌入到了网页中。contro

HSdiana 0喜欢 / 0评论 2019-12-27

Web自动化遇到shadowDOM节点操作

近期有同学在做web自动化的时候，发现页面上有些元素，在selenium中无法通过xpath来定位，各种原因找了半天，都没找到解决方案。最后发现元素在一个叫做shadow-root的节点下面。上面所看到的shadow-root标签其实就是一个shadowD

luvhl 0喜欢 / 0评论 2019-12-11

HTML5 audio 實驗

寒假即將結束，不巧膝蓋突然中了一箭，便決定實驗 HTML5audio標籤的效果，雖然已有jPlayer這款輕便好用的播放器，但不折騰一下就沒辦法消磨時間了，所以本次的實驗品完全由我操刀。audio可綁定play,pause,ended,progress,c

pythonclass 0喜欢 / 0评论 2013-09-16

Linux音频驱动之一：ALSA架构简介

在内核设备驱动层，ALSA提供了alsa-driver，同时在应用层，ALSA为我们提供了alsa-lib，应用程序只要调用alsa-lib提供的API，即可以完成对底层音频硬件的控制。由图1.1可以看出，用户空间的alsa-lib对应用程序提供统一的AP

hickwu 0喜欢 / 0评论 2011-03-24

USF MSDS501 计算数据科学中文讲义 1.1 一些动机（音频处理）

来源：ApacheCN『USF MSDS501 计算数据科学中文讲义』翻译项目原文：A bit of motivation . 通过利用类似烹饪书的代码库，我们可以使用几行 Python 代码来播放音频文件。您将有机会在本课程的声音实验中，尝试所有这些 P

ITxiaobaibai 0喜欢 / 0评论 2019-11-08

S3C2410 Linux IIS音频设备驱动分析

typedef struct {int size; /* buffer size */char *start; /* point to actual buffer */dma_addr_t dma_addr; /* physical buffer addr

Rafema 0喜欢 / 0评论 2011-08-27

浏览器端-W3School-HTML：HTML DOM Audio 对象

Audio 对象表示 HTML <audio> 元素。设置或返回是否在就绪后随即播放音频。返回表示音频已缓冲部分的 TimeRanges 对象。设置或返回音频所属媒介组合的名称。返回音频当前的就绪状态。返回表示可用文本轨道的 TextTrack

luvhl 0喜欢 / 0评论 2019-10-29

用JavaScript操纵HTML5的本地音频

HTML5的音频元素是一个非常强大的元素并且可以避免过多依赖第三方插件。最新的浏览器，比如Chrome10+和Firefox3.6+都已经嵌入了JavaScript库，并且还提供了方法和属性来操纵<audio>元素。在这篇文章中，我们将探讨几种

Devieun 0喜欢 / 0评论 2012-06-12

JS音频参考

http://www.bkjia.com/HTML5/1121699.html https://stackoverflow.com/questions/25595869/player-for-live-audio-streaming-in-html-

HTML混合APP开发 0喜欢 / 0评论 2017-07-08

绘制音乐的频谱图（使用Analyser节点）（转）

<input type="button" onclick="audio.play()" value="播放" />

Abudula 0喜欢 / 0评论 2018-11-19

HTML5 Audio API示例

示例一和示例二参考尚硅谷老师的视频教程；window.AudioContext){alert("当前浏览器不支持哟！DOCTYPE html><html><head><meta charset="U

来老师 0喜欢 / 0评论 2018-10-17

mac下Preferences丢失的问题

昨天为了解决mysql不能启动的问题，卸载后重新装了mysql，在卸载的时候删除了Preferences里边的一些文件，今天打开电脑后就发现，我的搜狗拼音输入法消失了，桌面背景也被换掉了，这些都可以理解能凑活着用，但是不能忍受的就是mac的反应速度特别慢，

quanhaoH 0喜欢 / 0评论 2013-05-09

如何解决Win10无法启动Windows audio服务提示错误1079

一般情况下，用户如果在Win10系统中遇到“音频服示未启动”提示的话，都会直接去服务中开启windows audio服务。不过，部分用户在启动过程中却遇到了“Windows 无法启动 Windows Audio 服务。错误 1079：此服务的账号不同于运行

86266537 0喜欢 / 0评论 2016-04-14

win10关闭usc解决realtek hd audio更新失败的两种方法

　　有用户反映通过windows update向用户推送的realtek hd audio驱动总是无法成功安装。　　具体表现在，当用户点击“安装更新”后，更新会安装失败，但是没有提供任何具体的错误信息。　　建议在问题解决后重新开启UAC，大部分软件都可以在

spoft 0喜欢 / 0评论 2015-09-29

windows7系统右下角喇叭图标显示红叉(播放音乐正常)的问题解决

我原以为是声卡问题，可打开设备管理看了一下，声卡没问题，播放音乐也正常，也不知道是怎么回事，在网上查了下，很多朋友也遇到同样的问题，下面我就给出解决Windows7音频服务未运行的几种解决方法。windows7音频服务无法启动怎么办?

Mrsandman 0喜欢 / 0评论 2013-06-18

使用MPlayer获取文件信息

以上红色部分就是我们需要的常规视频信息。根据mplayer&ffmpeg的输出，用脚本对输出做分析，既可以获得。分辨率，码流，视频格式，音频格式，音频采样率，音频声道，fps，等等

老王的技术 0喜欢 / 0评论 2011-08-16

如何用 ffmpeg 获取多音轨视频文件的各个音轨

Stream #0.0[0x1e0]: Video: mpeg2video, yuv420p, 720x480 [PAR 32:27 DAR 16:9], 9800 kb/s, 59.94 tbr, 90k tbn, 59.94 tbc. Stream #

chancle 0喜欢 / 0评论 2009-09-09

移动端H5开发遇到的坑

微信分享签名错误invalid signaturevue单页应用history模式下微信分享一直提示签名错误invalid signature. 按照微信官网文档，已经引入jssdk，正确的配置js安全域名，后台开发人员生成的签名也通过微信签名工具验证，但

yinbaoshiguang 0喜欢 / 0评论 2019-07-01

HTML5的video和audio

HTML5的video和audio从理论上来说，HTML5引入的<audio>和<video>元素，使用起来和<img>元素一样简单。对于支持HTML5的浏览器，不再需要使用插件来在HTML文档中嵌入音频和视频：。<

tanjiayq 0喜欢 / 0评论 2019-07-01

chrome浏览器下audio自动播放的hack

前言也许很多前端遇到过这个需求：消息提醒。一般来说，可以简单的实现绝不会用复杂的方式，audio标签提供了这个功能。但是，新版的chrome浏览器禁止了js自动播放音频的功能，见鬼了。音频播放<audio src="../audio.mp3

kingwbs 0喜欢 / 0评论 2019-07-01

使用Core Audio实现VoIP通用音频模块

最近一直在做c音频技术相关的项目，由于单项直播SDK，互动直播SDK，短视频SDK，都会用到音频技术，因此在这里收集三个SDK的音频技术需求，开发一个通用的音频模块用于三个SDK，同时支持iOS和Mac。想要阅读更多技术干货、行业洞察，欢迎关注网易云信博客

我的iOS王者之路 0喜欢 / 0评论 2019-06-30

移动端 h5 ios不能自动播放音乐的问题：

如果我们想要在一个页面自动播放背景音乐或是其他音频，比如ios是没办法调用audio.play()事件直接调用，非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法.情况1、我们知道安卓是可以直接调用音频的play事件的，ios不行。如是

lijiexiaoge 0喜欢 / 0评论 2019-06-30

使用PHP结合Ffmpeg快速搭建流媒体服务实践

为了解决这个问题，便想着搭建一套流媒体服务，这样手机就可以边看边下载，查询了一些资料了了解到需要先将视频分成一小片来传输，比如将MP4转码为M3U8格式，查询了相关转码方法，比较主流的方式是使用ffmpeg这个开源工具

HEVCCJL 0喜欢 / 0评论 2019-06-28

绘制音乐的频谱图（使用Analyser节点）（转）

<input type="button" onclick="audio.play()" value="播放" />

singlow 0喜欢 / 0评论 2018-11-19

基于canvas和web audio实现低配版MikuTap

导言最近发掘了一个特别happy的网页小游戏--MikuTap。打开之后沉迷了一下午，导致开发工作没做完差点就要删库跑路了，还好boss瞥了我一眼就没下文了。于是第二天我就继续沉迷，随着一阵抽搐，这个游戏索然无味之后，冷静的我决定用canvas和web a

Techgogogo 0喜欢 / 0评论 2019-06-28

JS音频参考

http://www.bkjia.com/HTML5/1121699.html https://stackoverflow.com/questions/25595869/player-for-live-audio-streaming-in-html-5

tianqi 0喜欢 / 0评论 2017-07-08

10个常见的HTML5面试题及答案

doctype html> HTML5使用UTF-8编码演示：。<meta charset="UTF-8">2.HTML5中如何嵌入音频？</audio>3.HTML5中如何嵌入视频？</video&

tianqi 0喜欢 / 0评论 2017-02-02

利用 web audio api 实现音频可视化

音频可视化实现之后真的很酷，虽然这次只是跟着MDN上的教程学习了一下，照着Demo敲了一遍而已。但收获颇多，记录于此。web audio api先来感受一下 web audio api 的基础概念，下面截取一段MDN上的介绍。具体的请移步文档。Web au

mislyvinky 0喜欢 / 0评论 2019-06-28

html5 -Audio(音频播放) 使用

-- <source src="你要播放的音乐.ogg" type="audio/ogg" /> -->

niehanmin 0喜欢 / 0评论 2016-08-08

JavaScript强化教程——Audio/Video

本文为H5EDU机构官方HTML5培训教程，主要介绍：JavaScript强化教程——Audio/Video. canPlayType()检测浏览器是否能播放指定的音频/视频类型。load()重新加载音频/视频元素。audioTracks返回表示可用音轨的

mianhuantang 0喜欢 / 0评论 2016-08-04

HTML5 Audio & Video 属性解析

play() 方法开始播放当前的音频或视频。load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新。<button onclick="changeSource()" type="button"&g

wxcmdn 0喜欢 / 0评论 2019-06-28

HTML5音频与视频

根据HTTML5的官方标准，并不需要为任何特定的音频或视频格式提供支持，所以浏览器厂商可以选择他们希望支持的格式。HTML5中，使用新增的audio元素来播放声音文件或音频流，支持Ogg Vorbis、MP3和WAV等音频格式。*srouce用type声明

tianqi 0喜欢 / 0评论 2015-10-09

HTML5 1 新增的语义标记

<section>跟<div>类似，也是默认换行。html5form表单新增的属性。html5input:不支持的浏览器就是普通的文本输入框text. <inputtype="search"/>输入搜

haocxy 0喜欢 / 0评论 2015-10-08

Capturing Audio & Video in HTML5

The road to getUserMedia()If you're not aware of its history, the way we arrived at thegetUserMedia()API is an interesting tale.

andyhu00 0喜欢 / 0评论 2015-07-08

精选9个不错的HTML5播放器

HTML5中，除了其他强大的功能外，同时还增加了audio标签，利用audio标签就可以播放音乐。下面是9个不错的HTML5音乐播放器。MediaElement音频视频播放器是纯HTML5和CSS编写的。Scott Andrew’s HTML5 audio

ReunionIsland 0喜欢 / 0评论 2015-05-20

5款帮助简化的HTML5 Audio开发的Javascript类库

HTML5的audio标签提供了我们方便控制声音的功能，但是使用原生的HTML5来开发声音或者音乐相关的项目仍旧非常的麻烦，在今天这篇文章中，我们将介绍５款帮助你简化开发的javascriptaudio类库，相信合理的使用能够帮助你高效的开发基于html5

luffot 0喜欢 / 0评论 2014-10-14

jquery实现的网页自动播放声音

//本来这里用的是<bgsound src="system.wav"/>,结果IE8不播放声音,于是换成了embed

MMMMMMMay 0喜欢 / 0评论 2014-08-07

树莓派学习手记——使用Python录音

有的时候我们想让树莓派能够录音，以实现语音控制等功能。所以今天我们总结一下用在树莓派上使用Python录音的过程。准备硬件树莓派上自带的3.5mm接口只能作为语音输出口，不能接麦克风。所以我们需要另外购买USB声卡，某宝上5元左右就能买到，当然你还需要一个

mayflowers 0喜欢 / 0评论 2019-06-26

微信h5页面audio标签在ios下不能自动播放

解决方案:1.如果是在页面刚加载就需要自动播放音频的话还是比较好办的,可以利用微信提供的api来实现。})到这里背景音乐已经可以播放了,但是对于用户体验不够好,如果我不触摸页面的话还是不会播放,如果你有更好的办法,可以加我QQ:32319149 一起讨论啊

OliverLau 0喜欢 / 0评论 2019-06-26

HTML5学习之——HTML 5 音频

HTML5 提供了播放音频的标准。Web 上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素

fyrlovezzp 0喜欢 / 0评论 2014-05-06

Vue+ElementUI: 手把手教你做一个audio组件

目的本项目的目的是教你如何实现一个简单的音乐播放器本项目并不是一个可以用于生产环境的element播放器，所以并没有考虑太多的兼容性问题本项目不是ElementUI的一个音频插件，只是一个教程，不过你可以自行扩展实现本项目只是为了学习audio相关事件以及

Returnvalues 0喜欢 / 0评论 2019-06-26

HTML5 audio 實驗

寒假即將結束，不巧膝蓋突然中了一箭，便決定實驗 HTML5audio標籤的效果，雖然已有jPlayer這款輕便好用的播放器，但不折騰一下就沒辦法消磨時間了，所以本次的實驗品完全由我操刀。每種瀏覽器支援的播放類型不一，最保險的方法是備妥mp3、ogg。介面寫

codingker 0喜欢 / 0评论 2013-09-16

getUserMedia API及HTML5 调用手机摄像头拍照

getUserMedia API简介HTML5的getUserMedia API为用户提供访问硬件设备媒体的接口，基于该接口，开发者可以在不依赖任何浏览器插件的条件下访问硬件媒体设备。MediaDevices.getUserMedia（）方法提示用户允许使

勤能补拙孰能生巧 0喜欢 / 0评论 2019-06-25

HTML5学习笔记(三)-Video、Audio

HTML5增加了audio和video两个元素，开发人员不必使用插件就能播放音频和视频了。Audio Video Interleave、Flash Video、MPEG4、Matroska、Ogg. 暂时没有对流视频的支持和规范。资源受跨域共享的限制。全频

运维工程师日记 0喜欢 / 0评论 2013-07-03