syg-simple-audio-player
Play and stop only audio player. 再生と停止だけのオーディオプレイヤー。
Description
試聴ボタンなどで使う。
「再生だけできて、アクティブ状態を持たせられればいい」というだけのオーディオプレイヤー。
ストリーミング、非ストリーミング両対応。
Install
npm install --save @sygnas/simple-audio-player
Usage
HTML
<!-- 非ストリーミング -->
<button class="js-audio btn-audio" data-audio-src="foo.mp3" data-audio-type="file">Sound 1</button>
<button class="js-audio btn-audio" data-audio-src="bar.mp3" data-audio-type="file">Sound 2</button>
<!--
ストリーミング
HDS/HLS/MSE形式のストリーミングを自動判別する
下記のファイルが存在する想定。
HDS形式:http://stm.foo.bar/abcd1234.mp4/manifest.f4m
HLS形式:http://stm.foo.bar/abcd1234.mp4/playlist.m3u8
MSE形式:http://stm.foo.bar/abcd1234.mp4/manifest.mpd
-->
<button class="js-audio btn-audio" data-audio-src="stm.foo.bar/abcd1234.mp4">ストリーミング</button>
<!-- 停止ボタン -->
<p><button class="js-audio-stop">停止</button></p>
CSS
.btn-audio[data-audio-status = "play"]{
background-color: #b8860b;
}
.btn-audio[data-audio-status = "pause"]{
background-color: #73d8ff;
}
Javascript
import AudioPlayer from '@sygnas/simple-audio-player';
// .js-audio をクリックすると data-audio-src属性で指定された音声データを再生する
const audio_player = new AudioPlayer('.js-audio');
// 停止ボタン
document.querySelector('.js-audio-stop')
.addEventListener('click', () => {
audio_player.stop();
});
Attributes
再生する音声データのURL、音声データタイプ、ステータスなどをボタンの data属性に格納している。
data-audio-src
再生する音声データのURL。
ストリーミングの場合はURLの一部を指定する。
例:http://stm.foo.bar/abcd1234.mp4/manifest.f4m
→ stm.foo.bar/abcd1234.mp4
data-audio-type
音声データのタイプを指定する。
値 | 備考 |
---|---|
file | 非ストリーミングの場合は必ず記入 |
hls | HLS形式 |
hds | HDS形式 |
mse | MSE形式 |
無指定 | HLS / HDS / MSE を自動選択する |
data-audio-status
再生・一時停止などの状態が格納される。
値 | 備考 |
---|---|
play | 再生中 |
pause | 一時停止 |
stop | 停止 |
属性が存在しない | 停止。デフォルト状態 |
<!-- foo.mp3 を再生しているので、 data-audio-status="play" になっている -->
<button data-audio-src="foo.mp3" data-audio-type="file" data-audio-status="play">foo</button>
<!-- http://stm.foo.bar/abcd1234.mp4/manifest.f4m をストリーミング再生 -->
<!-- ストリーミング形式は自動選択したいので data-audio-type は無指定 -->
<button data-audio-src="stm.foo.bar/abcd1234.mp4">ストリーミング</button>
Options
const audio_player = new AudioPlayer('.js-audio', {config});
デフォルト設定
const defaults = {
attr_src: 'data-audio-src',
attr_status: 'data-audio-status',
attr_type: 'data-audio-type',
// 以下、syg-audio-src の設定
hds: {
protcol: 'http://',
playlist: '/manifest.f4m',
},
hls: {
protcol: 'http://',
playlist: '/playlist.m3u8',
},
mse: {
protcol: 'http://',
playlist: '/manifest.mpd',
autoplay: false,
},
};
パラメータ | デフォルト | 備考 |
---|---|---|
attr_src | 'data-audio-src' | オーディオソースを指定する属性の名前 |
attr_status | 'data-audio-status' | 状態を格納する属性の名前 |
attr_type | 'data-audio-type' | ソースのタイプを指定する属性の名前 |
hds / hls / mse | syg-audio-src のパラメータを参照 |
Property
is_playing {Boolean}
再生中なら true
。
now_playing_btn {HTMLElement}
現在再生中のエレメント。
targets {NodeList}
対象のエレメント
audio_src {syg-audio-src}
ストリーミングに対応したHTML5 Audioソース管理。
Methods
stop()
現在再生している音声を停止する。
audio.currentTime = 0;
をしている。
License
MIT