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 ( ) 

可用操作：

对音频事件的反应

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

 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 ) 

可用事件：

音频元素属性

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

 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
* }
*/ 

可用属性：

处理的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

执照