百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

10款超实用JavaScript音频库 js调用音频文件

myzbx 2024-12-28 14:19 16 浏览

HTML5提供了一种新的音频标签实现和规范用一个简单的HTML对象而无需音频插件来控制音频。这只是一个简单的整合这些新的HTML5音频特征及使用JavaScript来创建各种播放控制。

下面将介绍10款JavaScript音频库,用这些类库,我们可以控制音频和视频元素的各种方法、属性和事件。

1. Howler.js

Howler.js一款基于web audio API的javascript类库,如果浏览器不支持的话,会自动fallback到HTML audio。为了保证跨浏览器的兼容性,它允许接收多种文件格式。该库能同时缓存和播放多个声音,还有循环播放功能,淡入淡出效果和标准的多媒体控制功能。Howler.js是轻量级的(5kb),且不需要任何JS框架。

2. Annyang.js

Annyang是一个微小的javascript库,它可以轻松实现让访客用语音命令控制你的网站。Annyang没有依赖性,重量不到1 kb,并且可以免费使用和修改。它具有很好的浏览器兼容性。

3. Voix.js

voix.js是一个简单、轻量级的级JavaScript库,可以实现在网站、游戏及APP中添加语音命令。它可以通过麦克风启动或停止,并且可以实现当检测到给定关键字时触发相关事件。

4. Audio.js

Audio.js是一款小巧的音JavaScript音频库,它可以在任何地方使用最新的HTML5中的audio标签来调用音乐文件并输出,而且兼容性也非常不错,完美通过下面的各大浏览器列表:

1、Mobile Safari (iOS 3+)

2、Android (2.2+, w/Flash)

3、Safari (4+)

4、Chrome (7+)

5、Firefox (3+, w/ Flash)

6、Opera (10+, w/ Flash)

7、IE (6, 7, 8, w/ Flash)

Audio.js支持自定义样式,可以很方便的根据页面的整体效果去设置播放器的界面颜色,当然这些都是因为Audio.js可以很好的配合HTML5标签,摆脱了FLASH的束缚。另外Audio.js还支持下拉播放列表,同时还支持键盘上的方向键与空格键来控制音乐的播放与暂停。

5. Buzz

Buzz是一款小而强大的JavaScript音频库,且允许你轻松的利用新的HTML5音频元素。

6. SoundManager 2

SoundManager 2 是一个库封装和扩展了Flash声音功能的,可以跨平台的Javascript音频类。SoundManager 2是为了实现一个javascript驱动的优秀互动网络项目的愿望而开发,它可以免费用于个人和商业项目。同时,soundmanager 2给我们提供了功能强大的API。

7. Sound.js

SoundJS是一个简化网络音频处理的JavaScript库。它为不同的浏览器中播放音频提供了一个统一的API,包括使用插件模式来提供一种简单的方法控制音频插件。另外,SoundJS还具有音频预加载机制。

8. Audiolet

audiolet是一个在浏览器中实时的音频合成和组成的JavaScript库。它使用基于图形的路由和基于模式的调度,使复杂的音频编程简单,易于理解。

9. ION.Sound

Ion.Sound是一个播放声音的jQuery插件,它已经在Google Chrome, Mozilla Firefox, Opera, Safari, IE(9.0+) 及 移动浏览器上测试通过,在MIT许可条件下可以免费试用。

10. Audio5js

Audio5js提供了一个与HTML5音频播放无缝兼容的API,它支持多种解码器,并且能够使用flash向前兼容老版本的浏览器。创建audio5js的目的就是为提供一个轻量级的,纯JavaScript的,能够在浏览器中播放音频的接口。

相关推荐

Luminati代理动态IP教程指南配置代理VMLogin中文版反指纹浏览器

介绍如何使用在VMLogin中文版设置Luminati代理。首先下载VMLogin中文版反指纹浏览器(https://cn.vmlogin.com)对于刚接触Luminati动态ip的朋友,是不是不懂...

文档中图形及子图形的处理(word中的图形对象有何特点)

【分享成果,随喜正能量】走得越远,见识越多,认识的人越多,你就越能体会到,人这一辈子,你真的在意的,同时又在意你的人,就那么几个,这几个人,就是你全部的世界。三两知己,爱人在侧,父母康健,听起来平淡无...

Python爬虫破解滑动验证码教程(python绕过滑动验证码)

破解滑动验证码通常需要结合图像识别和模拟人类操作,以下是分步骤的解决方案:1.分析验证码类型缺口识别型:背景图带缺口,滑块图带凸块轨迹验证型:除了位置还需模拟人类移动轨迹2.获取验证码图片方法一:...

「教程」5 分钟带你入门 kivy(新手kp教学)

原创:星安果AirPythonkivy语言通过编写界面UI,然后利用Python定义一些业务逻辑,可以移植很多功能模块到移动端直接执行。下面对kivy常见用法做一个汇总。1、什么是...

比呀比: Fossil Estate Canvas EW 男式复古邮差包 $70.99

Fossil是一个来自美国的全球性生活时尚品牌,始建于1984年,专注于时尚配件,是第一个将手表的价值与款式完美结合的美国品牌,如今Fossil已跃身成为美国最受欢迎的品牌之一。这款FossilE...

智能教学:如何在网上授课(网上授课怎么弄)

摘要:因为担心传统课堂可能会传播冠状病毒,许多大学已经开始在网上授课。耶鲁-新加坡国立大学的讲师凯瑟琳·谢伊·桑格(CatherineSheaSanger)解释了如何快速而有效地做到这一点。当新型冠...

wxPython库教程系列之图片:托盘图标和图片缩放、移动

1概要:=====1.1托盘图标设置1.2普通图片显示:原图显示,缩放显示,窗口与图片大小相互适应。1.3按钮图片设置1.4移动图片和zoom菜单按钮联动设置2托盘图标:========2...

UE4渲染目标开发教程(ue4渲染效果图质量怎么样)

渲染目标(RenderTarget)是你可以在运行时写入的纹理。在引擎方面,它们存储基础颜色、法线和环境光遮蔽等信息。在用户方面,渲染目标主要用作一种辅助相机。你可以将场景捕捉指向某物并将图像存储到...

比呀比: Fossil 化石 Canvas NS 男士复古帆布斜挎包 $57.59

FossilCanvasNS男士复古帆布斜挎包,尺寸约为26.5*11*33厘米。采用100%纯棉帆布面料,融合了休闲与百搭的外形,在经典的款型呈现复古质感。内设1个拉链袋,2个搭扣数码产品袋和...

比呀比: Timberland 添柏岚 Canvas Cord Case 帆布旅行手包 $5.99

Timberland添柏岚这款耐用帆布旅行手包,虽然一眼过去,觉得不咋地,但是品牌和质量还是妥妥滴,非常适合装一些零零碎碎的小东西,便于携带,多色可选,重点是价格更是感动价啊。目前这款包在6pm报价...

提炼文章/知识资料,两键转换成小红书图片

现在AI的功能已经越来越强大了,通过AI可以提高我们不少工作效率。刚好前几天做了一个几乎“一气呵成”,把长文章转成小红书卡片的流程Demo,分享给大家。之前发过两篇利用AI把长文章转成小红书图片...

python海龟绘图turtle(一):画布和窗体

海龟绘图(turtle)是python的一个有趣的内置模块,是python语言的标准库之一,是入门级的图形绘制函数库。海龟绘图(turtle)可以根据编写的控制指令(代码),让一个小“海龟”在屏幕上来...

在文档中添加画布及图片(word中如何添加画布)

【分享成果,随喜正能量】宁可正而不足,不可邪而有余。相识满天下,知心能几人。书七成,戏三分,牛皮灯影胡编成。布施不如还债,修福不如避祸。勿以恶小而为之,勿以善小而不为。。《VBA之Word应用》,是我...

知识管理神器 Obsidian,终于有了白板功能!

沙牛提示阅读本文需要3分钟,Obsidian白板功能来了!如果你喜欢本文,就分享给你的小伙伴!01白板继双链笔记之后,这一年,白板类工具开始火了起来。顾名思义,白板类工具,它给了你一张无限尺寸...

虚拟背景第一弹!教你如何在家中优雅地“学在交大”!

交大将于3月2日正式开始线上教学(3月1日举行线上教学第一课|视频直播课)目前正处于网课试课阶段交大在线课程教学以ZOOM、Canvas等作为主平台平台的虚拟背景功能可以具特别的环境效果更好地沉浸课堂...