学习howler.js

作者 likaiqiang 日期 2019-02-24
学习howler.js

快速上手

安装

浏览器端

<script src="/path/to/howler.js"></script>

作为依赖引入

import {Howl, Howler} from 'howler'
const {Howl, Howler} = require('howler')

例子

https://jsfiddle.net/likaiqiang/zf3xbev2/14/

核心

选项

src Array/String []

顾名思义,待播放音乐的地址,可以是一个字符串也可以是个数组,值是一个普通url或者base64形式的url。如果文件没有扩展名,则需要使用Format属性显式指定扩展名。如果是数组,howler会尝试加载数组的第一个值,如果不支持,会尝试第二个,以此类推。

volume Number 1.0

音轨的音量,值从0到1

html5 Boolean false

如果设置成true,会强制使用html5 audio 播放音频。当你不需要等音乐全都加载完才开始播放时,可以设置html5:true

loop Boolean false

是否循环播放音乐

preload Boolean true

当Howl被加载时是否自动开始加载音乐

autoplay Boolean false

当音乐加载完毕后是否自动播放音乐

mute Boolean false

是否静音

sprite Object {}

这玩意是什么鬼

rate Number 1.0

播放速率,0.5-4.0,1.0是正常速率

pool Number 5

不活动的音频池的大小。一旦音乐被暂停或者播放完毕,他们就会被标记为“已结束”以便被回收。howler创建了一个音频池来重复利用这些不活动的音频。通常,你不需要改变pool的值。需要记住的是,当一个音频被暂停,该音频并不会从池子中删除,而是仍被视为活动的以便后续重复利用。

format Array []

文件的格式。howler会自动检测文件的格式,而当检测不到时,可以手动指定一种格式。

xhrWithCredentials Boolean false

在使用Web音频API时,是否对用于获取音频文件的XHR请求启用WITHCredentials标志(see reference)

onload Function

当音频被加载时触发

onloaderror Function

方法

play

开始播放声音,返回该声音的唯一id。

第一个参数是一个sprite或者声音id。如果是sprite,则播放符合该sprite定义的声音。如果是声音id,则播放该id对应的声音。然后,如果该声音id已经从poor中移除,则不会播放。

pause

暂停某个或者所有声音,保存声音的播放位置

第一个参数是要暂停的声音id,如果不填,则暂停所有声音

stop

停止声音,重置声音的播放位置为0

第一个参数是声音id,如果不填,则停止所有声音。

mute([muted], [id])

静音,但是不会暂停播放
第一个参数是静音的状态。第二个参数是声音id,不填则对所有声音生效

volume([volume], [id])

get/set某个或者一组声音的音量。此方法可以接受0、1、2个参数。

第一个参数要设置的音量。第二个参数是声音id,如果没有,则对所有声音生效。

fade(from, to, duration, [id])

给当前正在播放的某个声音添加音量渐变。当渐变完成时触发fade事件

  1. from:渐变开始时的音量
  2. to:渐变结束时的音量
  3. duration:渐变经历的时长
  4. id:声音id(同上)

rate([rate], [id])

设置或者获取音乐的速率,这个方法接受0、1、2个参数

  1. rate 可选的参数 number类型 取值范围从0.5到4.0,1.0是正常速率
  2. id 可选的参数 number类型 如果缺省,则对所有声音生效。

seek([seek], [id])

设置/获取音乐的播放位置,这个方法接受0、1、2个参数(参数同上)

loop([loop], [id])

设置/获取音乐的循环状态,这个方法接受0、1、2个参数(参数同上)

state()

获取Howl的加载状态,返回unloaded、loading或者loaded

playing(id)

检查一个或者一组音乐是否正在播放,参数为音乐id,如果缺省,则对所有音乐生效

全局方法

插件