@sygnas/simple-audio-player

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