html5 audio driver下载-html5 audio driver免费版下载-源码网

纯html5 audio driver

自以为是的低水平功能绑定，以控制HTML5音频

约束（或您在这里找不到的东西）

具有控件和所有模糊的完整功能性音频播放器，您应该使用Medialement
支持多种声音和环境控制，而是应该使用howler.js
没有网站，您应该使用pizzicato

功能（或您在这里找到的内容）

完全控制音频元素
与所有必要事件的功能绑定
所有音频动作的合成性
辅助功能以获得相关的音频元素属性
用香草ES6撰写，只有一个依赖于ramda

安装

npm install html5-audio-driver或yarn add html5-audio-driver

用法

创建音频元素

如果您已经定义了音频元素，请对您有好处，请跳过此并使用DOM参考。否则，您可以使用此助手，助手将创建一个音频元素，而无需控件，预加载和循环：

 import { audio } from '@podlove/html5-audio-driver'

const myAudioElement = audio ( [ {
  url : 'audio-files/example.m4a' ,
  mimeType : 'audio/mp4'
} , {
  url : 'audio-files/example.mp3' ,
  mimeType : 'audio/mp3'
} , {
  url : 'audio-files/example.ogg' ,
  mimeType : 'audio/ogg'
} ] )

需要mimeType ，以便浏览器可以决定使用哪种源。

与音频元素互动

所有音频元素动作均被咖喱并接受为音频元素的第一个参数。另外，每个动作都返回音频元素：

 import { compose } from 'ramda'
import { play , setPlaytime } from '@podlove/html5-audio-driver/actions'

const setPlaytimeAndPlay = compose ( play , setAudioPlaytime ) ( myAudioElement )
// Sets the playtime to 50 seconds and plays the audio
setPlaytimeAndPlay ( 50 )

为了方便起见，还有一个action作曲家：

 import { actions } from '@podlove/html5-audio-driver'

const audioActions = actions ( myAudioElement )

audioActions . load ( )
audioActions . play ( )
audioActions . pause ( )
audioActions . setPlaytime ( 50 )
audioActions . setRate ( 1.5 )
audioActions . mute ( )
audioActions . unmute ( )

可用操作：

功能	行动	参数
`play`	Safeplays音频，如果尚未加载，则会启动加载	空白
`pause`	暂停音频	空白
`load`	加载音频	空白
`mute`	静音音频	空白
`unmute`	传递音频	空白
`setRate`	设定游戏率	编号：[0.5 ... 4]
`setPlaytime`	设置当前的播放时间	编号：[0 ...持续时间]

对音频事件的反应

所有音频事件均被咖喱，并接受其第一个参数为音频元素。第二个参数始终是回调函数。每个事件都会返回不同的音频属性，具体取决于事件范围：

 import { onPlay } from '@podlove/html5-audio-driver/events'

const playEvent = onPlay ( myAudioElement )

playEvent ( console . log ) // similar to onPlay(myAudioElement, console.log)
/**
* Will log audio properties on audio play:
* {
*  duration,
*  buffered,
*  volume,
*  state,
*  playtime,
*  ended,
*  rate,
*  muted,
*  src,
*  paused,
*  playing
* }
*/

为了方便起见，还有一个events作曲家：

 import { events } from '@podlove/html5-audio-driver'

const audioEvents = events ( myAudioElement )

audioEvents . onLoading ( console . log )
audioEvents . onLoaded ( console . log )
audioEvents . onReady ( console . log )
audioEvents . onPlay ( console . log )
audioEvents . onPause ( console . log )
audioEvents . onBufferChange ( console . log )
audioEvents . onBuffering ( console . log )
audioEvents . onPlaytimeUpdate ( console . log )
audioEvents . onVolumeChange ( console . log )
audioEvents . onError ( console . log )
audioEvents . onDurationChange ( console . log )
audioEvents . onRateChange ( console . log )
audioEvents . onEnd ( console . log )

可用事件：

功能	事件	原来的	回调有效载荷	一次
`onLoading`	当浏览器开始音频加载时	`progress`	所有道具	`true`
`onLoaded`	当浏览器加载整个文件时	`canplaythrough`	所有道具	`true`
`onReady`	当浏览器有足够的数据播放时	`canplay`	所有道具	`false`
`onPlay`	当浏览器开始播放音频时	`play`	所有道具	`false`
`onPause`	当浏览器暂停音频时	`pause`	所有道具	`false`
`onEnd`	当浏览器到达音频的末端	`ended`	所有道具	`false`
`onBufferChange`	当浏览器缓冲新的音频段时	`progress`	缓冲段	`false`
`onBuffering`	当浏览器等待音频片段播放时	`waiting`	所有道具	`false`
`onPlaytimeUpdate`	当音频的当前时间更改时	`timeupdate`	游戏时间	`false`
`onVolumeChange`	当音频变化时	`volumechange`	体积	`false`
`onError`	播放音频时发生错误时	`error`	`NETWORK_NO_SOURCE` ， `NETWORK_EMPTY` ， `NETWORK_LOADING` ， `MEDIA_ERROR`	`false`
`onDurationChange`	当浏览器有有关音频持续时间的新信息时	`durationchange`	期间	`false`
`onRateChange`	当浏览器检测到音频播放率的变化时	`ratechange`	速度	`false`
`onFilterUpdate`	当更换过滤器时	`filterUpdated`	所有道具	`false`

音频元素属性

提供多个不同的功能，使您可以轻松访问音频元素属性。最初，其中大多数是未定义的：

 import { volume } from '@podlove/html5-audio-driver/props'

isPlaying ( myAudioElement ) // Will return false

为了方便起见，还可以使用组合版本，为您提供所有可用的属性：

 import { props } from '@podlove/html5-audio-driver/props'

props ( myAudioElement )
/**
* {
*  duration,
*  buffered,
*  volume,
*  state,
*  playtime,
*  ended,
*  rate,
*  muted,
*  src,
*  paused,
*  playing
* }
*/

可用属性：

功能	描述	返回值	初始值
`duration`	音频持续时间秒	数字	`undefined`
`buffered`	缓冲音频段开始和结束几秒钟	[[数字，数字]，...]	`[]`
`volume`	音频量	编号：[0 ... 1]	`undefined`
`state`	网络状态	`HAVE_NOTHING` ， `HAVE_METADATA` ， `HAVE_CURRENT_DATA` ， `HAVE_FUTURE_DATA` ， `HAVE_ENOUGH_DATA`	`undefined`
`playtime`	当前的音频播放时间位置	数字	`undefined`
`ended`	指示音频是否已经结束	布尔	`undefined`
`rate`	音频播放率	编号：[0.5 ... 4]	`undefined`
`muted`	指示音频是否静音	布尔	`undefined`
`src`	二手音频源	细绳	`undefined`
`paused`	指示音频是否暂停	布尔	`undefined`
`channels`	可用的音频频道	数字	`undefined`
`playing`	指示音频是否在播放	布尔	`false`

处理的HTML5怪癖和限制（讨厌的部分：/）

HTML5音频是摆脱闪光地狱的必要补充。尽管它已经在所有不同浏览器中都实施了多年，但每个实现都有其缺陷。如果您想深入研究主题，我建议您以下文章。

玩动作

使用play动作将为您提供安全的功能，以使大多数错误散发出来。一个来源是，较旧的浏览器不会实现audio.play()作为承诺。另外，在play和pause之间也需要.catch ed。

播放时间（当前时间）

在Safari和Mobile Safari中，不可能在加载音频之前设置currentTime 。您可以设置它，但不会突变音频currentTime值。因此， html5-audio-driver使用currentTime同步的自定义playtime属性。

移动环境

要在移动设备上play音频，您必须触发使用直接的用户交互来触发音频。另外volume移动设备上也不可用。

传统浏览器支持（IE11）

如果您需要IE11支持，则必须在您的应用程序中提供一些多填充。看看测试多填充以查看工作示例。

出版

运行npm publish:prepare移动到dist/文件夹并运行npm publish --public

html5 audio driver

纯html5 audio driver

约束（或您在这里找不到的东西）

功能（或您在这里找到的内容）

安装

用法

创建音频元素

与音频元素互动

可用操作：

对音频事件的反应

可用事件：

音频元素属性

可用属性：

处理的HTML5怪癖和限制（讨厌的部分：/）

玩动作

播放时间（当前时间）

移动环境

传统浏览器支持（IE11）

出版

执照

相关文章

jsrobowar

Simple Soundboard

Essential Audio Player

rationalkeyboard

推荐阅读

向上：银河游戏免安装正式版

风暴驭使正式中文版

冥河：贪婪之刃中文试玩版

超级键盘侠免安装绿色中文版