详解Howler.js Web音频播放终极解决方案

前言

相信有很多人在写移动端音频播放的时候都踩过不少坑，特别是复杂音频项目在兼容多种设备的时候更是让你抓狂，比如ios端不能一开始就播放音频，必须要用户进行了操作。。。。

偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美

Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目，Howler.js 基于 Google 的 Web Audio API，能够帮助你快速简单全面的控制音频。

特点及兼容性

  • Howler.js默认使用Web Audio，但在IE上可以自动转为HTML 5 Audio。这点很是贴心。
  • 移动端的Safari和Chrome都禁止网页自动播放声音，必须通过用户的操作，touch, click等触发。Howler.js可以设置成自动捕捉用户操作激活（解禁）声音播放。
  • Howler.js支持很多声音格式以兼容各种浏览器。MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.几乎涵盖了所有格式
  • 支持3D游戏
  • 自动缓存
  • 支持淡入淡出效果
  • 轻量
  • 纯JS
  • 无第三方依赖
  • 模块化

「更多特性可以去Github查看 Howler.js」

使用方法

官网上都有介绍 这里不过多讨论

import {Howl, Howler} from 'howler';

// 初始化一个音频类
const sound = new Howl({
 src: ['sound.webm', 'sound.mp3']
});

// 播放音频
sound.play();

// 改变全局音频声音大小
Howler.volume(0.5);

// 只想改变某个音频的大小可以在初始化的时候修改
const sound = new Howl({
 src: ['sound.webm', 'sound.mp3'],
 volume:0.5
});

使用Howler.js

最基本的，一个MP3播放：

var sound = new Howl({
 urls: ['sound.mp3']
}).play();

更多的播放选项：

var sound = new Howl({
 urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
 autoplay: true,
 loop: true,
 volume: 0.5,
 onend: function() {
  console.log('Finished!');
 }
});

定义和播放某一部分的音频

var sound = new Howl({
 urls: ['sounds.mp3', 'sounds.ogg'],
 sprite: {
  blast: [0, 1000],
  laser: [2000, 3000],
  winner: [4000, 7500]
 }
});

// shoot the laser!
sound.play('laser');

总结

自己封装的音频库多多少少会有一些性能和兼容问题，比如音频循环播放的时候Howler就处理的非常好不会有切割的感觉

到此这篇关于详解Howler.js Web音频播放终极解决方案的文章就介绍到这了,更多相关Howler.js Web音频播放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS实现audio音频剪裁剪切复制播放与上传(步骤详解)

    背景是这样的,用户上传音频文件,可能只需要几十秒就够了,但是常规的音乐都要3~5分钟,80%的流量都是不需要的,要是就这么传上去,其实是流量的浪费,如果可以在前端就进行剪裁,也就是只取前面一段时间的音频,岂不是可以给公司省很多流量费用,前端的业务价值就体现了. 关键如何实现呢? 下面,就以"截取用户上传音频前3秒内容"的需求示意下如何借助Web Audio API实现音频的部分复制与播放功能. 一.不哔哔,直接正题 实现步骤如下. 1. File对象转ArrayBuffer 在Web网

  • 基于JavaScript实现简单的音频播放功能

    基于JavaScript实现简单的音频播放功能

    现效果如下: 由于我这边不需要其他按钮,就没写 数据是由后台提供,在这做了个小列子 后台代码 public ActionResult MusicPlayer(int musicId=0) { MusicPlayerModel model = new MusicPlayerModel(); switch (musicId) { default: model.MusicName = "Believe-动画<海贼王>"; model.CoverImg = "/Conte

  • JS实现可视化音频效果的实例代码

    效果如图: 背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整. 代码如下(可直接复制使用): <html lang="en"> <head> <meta charset="UTF-8"> <title>可视化音频</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></scr

  • vue中音频wavesurfer.js的使用方法

    vue中音频wavesurfer.js的使用方法

    本文为大家分享了vue中音频wavesurfer.js的使用方法,供大家参考,具体内容如下 效果图 首先引入wavesurfer.js 其次 封装 wavesurfer.js` <template> <div class="waveformOuter"> <div id="waveform" ref="waveform" /> <div class="play" @click=&quo

  • JS 音频可视化插件Wavesurfer.js的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import WaveSurfer from "wavesurfer.js"; 创建实例对象 this.wavesurfer = WaveSurfer.create(options); options 参数 默认值 说明 audioRate 1 音频的播放速度,数值越小越慢 barWidth none 如

  • 详解js的视频和音频采集

    今天要写的,不是大家平时会用到的东西.因为兼容性实在不行,只是为了说明下前端原来还能干这些事. 大家能想象前端是能将摄像头和麦克风的视频流和音频流提取出来,再为所欲为的么.或者说我想把我canvas画板的内容录制成一个视频,这些看似js应该做不到的事情,其实都是可以做到的,不过兼容性不好.我在这里都是以chrome浏览器举的例子. 这里先把用到的api列一下: getUserMedia:打开摄像头和麦克风的接口(文档链接) MediaRecorder:采集音视频流(文档链接) srcObject

  • 详解Howler.js Web音频播放终极解决方案

    前言 相信有很多人在写移动端音频播放的时候都踩过不少坑,特别是复杂音频项目在兼容多种设备的时候更是让你抓狂,比如ios端不能一开始就播放音频,必须要用户进行了操作.... 偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美 Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频,该库最初是为一个 HTML5 游戏引擎所开发,但也可用于其他的 Web 项目,Howler.js 基于 Google 的 Web Audio API,能够帮

  • 详解python 降级到3.6终极解决方案

    最近因为要安装Tensorflow,然后发现tensorflow居然不支持python3.7,于是怒而将其降级到3.6 以下是具体命令,mark一下 1.移除现有Python brew unlink python 2.安装3.6.5 brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/f2a764ef944b1080be64bd88dca9a1d80130c558/Formula/python.rb 或者co

  • 详解node.js创建一个web服务器(Server)的详细步骤

    详解node.js创建一个web服务器(Server)的详细步骤

    前言 在 node.js 中创建一个服务器非常简单,只需要使用 node.js 为我们提供的 http 模块及相关 API 即可创建一个麻雀虽小但五脏俱全的web 服务器,相比 Java/Python/Ruby 搭建web服务器的过程简单的很. http model 要想创建一个基于 node.js 的 web 服务器,你就必须使用 node.js 提供的 http 模块,node.js 中的 http 接口旨在支持传统上难以使用的协议的许多特性, 特别是,大块的.可能块编码的消息,接口永远不会

  • 详解用js代码触发dom事件的实现方案

    背景 前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件.通常一些元素上会自带一些触发事件的方法,例如click.focus等,但是如果是其他的事件,例如mousedown.mouseup.mouseenter,这些事件怎么模拟呢? 思路 其实思路很简单,web标准中定义了一系列API接口,其中dispatchEvent允许我们向一个指定的事件目标派发一个事件,而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规

  • 详解node.js 事件循环

    Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高. Node.js 几乎每一个 API 都是支持回调函数的. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. 事件驱动程序 Node.js 使用事件驱动模型,当web server接收到请

  • 详解Node.js使用token进行认证的简单示例

    详解Node.js使用token进行认证的简单示例

    本文只介绍简单的应用,关于json web token的具体介绍以及原理请参考阮一峰老师的JSON Web Token 入门教程. 使用的Node框架是koa2,前端发送ajax请求使用axios 首先创建工程目录: static中存放静态资源,views存放前端模板,server.js为后端代码. 安装必要的依赖项: "dependencies": { "@koa/router": "^8.0.8", "jsonwebtoken&qu

  • 详解Node.js中间件是怎样工作的

    详解Node.js中间件是怎样工作的

    目录 什么是 Express 中间件? 编写 Express 中间件的要求 Express中间件:基础 中间件解决什么问题?为什么要用它? 中间件函数是什么样的? 中间件链 Express中间件的类型 内置中间件 错误处理中间件 第三方级别的中间件 总结 什么是 Express 中间件? 中间件在字面上的意思是你在软件的一层和另一层中间放置的任何东西. Express 中间件是在对 Express 服务器请求的生命周期内所执行的函数. 每个中间件都可以访问其被附加到的所有路由的 HTTP 请求和

  • 详解 vue.js用法和特性

    详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解node.js中的npm和webpack配置方法

    详解node.js中的npm和webpack配置方法

    概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

  • 详解Vue.js中.native修饰符

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

随机推荐