@sygnas/simple-audio-player2

syg-simple-audio-player2

簡易なオーディオ再生ボタン

Description

下記のモジュールにより構成されている。

• useAudioController
  • 再生ボタンとプログレスバーのコントローラー
• useAudioButton
  • ひとつのボタンで再生・一時停止をやるだけの
• useAudioPlayer
  • 簡単な制御を行う
• useAudioSource
  • 対応フォーマットのチェックおよびソース管理

MP3 / OGG / HDS / HLS / MSE 形式に対応。

Latest Release

• 2023.01.26 : ver.2.0.0
  • useAudioController を追加
• 2023.01.12 : ver.1.2.0
  • hls.js に対応
• 2023.01.09 : ver.1.1.0
  • README.md 更新
• 2022.12.14 : ver.1.0.0
  • とりあえず作成

Install

npm install --save @sygnas/simple-audio-player2

Usage：簡単な例

html

<button
  class="js-audioplayer"
  data-audio-format="mp3"
  data-audio-state="stop"
  data-audio-src="voice_1.mp3"
>
  ボイス1
</button>

<button
  class="js-audioplayer"
  data-audio-format="mp3"
  data-audio-state="stop"
  data-audio-src="voice_2.mp3"
>
  ボイス2
</button>

JavaScript

import { useAudioButton } from "@sygnas/simple-audio-player2";

const audioButton = useAudioButton();
audioButton.setButtonWithSelector(".js-audioplayer");

Usage：Vue で使う

html

<button @click="playVoice">再生</button>

JavaScript

import { useAudioPlayer } from "@sygnas/simple-audio-player2";

const audioPlayer = useAudioPlayer();

/**
 * 再生
 */
const playVoice = () => {
  if (audioPlayer.isPlaying) {
    audioPlayer.stop();
  } else {
    audioPlayer.play("voice_1.mp3", "mp3");
  }
};

Usage：プログレスバーを表示させる

html

<div id="app-player" data-audio-src="xxxx.mp3" data-audio-format="mp3">
  <span class="playbtn"></span>

  <span class="progress-base">
    <span class="progress-bar"></span>
  </span>
</div>

JavaScript

import { useAudioController } from "@sygnas/simple-audio-player2";

export default function () {
  const audioController = useAudioController();
  audioController.setControllerWithSelector("#app-player");
}

---

音声ファイルの指定について

MP3 / OGG 形式は音声ファイルの URL をそのまま記述すれば良い。 HDS / HLS / MSE 形式はプレイリストが必要なため下記のように指定する。

HDS 形式について

プレイリスト htts://example.com/foo.mp3/manifest.f4m ソース指定 htts://example.com/foo.mp3

HLS 形式について

プレイリスト htts://example.com/foo.mp3/playlist.m3u8 ソース指定 htts://example.com/foo.mp3

HLS 形式を使うには hls.js が必要。 https://github.com/video-dev/hls.js

<!-- 下記をhtmlに追記する -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

MSE 形式について

プレイリスト htts://example.com/foo.mp3/manifest.mpd ソース指定 htts://example.com/foo.mp3

MSE 形式を使うには dash.js が必要。 https://github.com/Dash-Industry-Forum/dash.js

<!-- 下記をhtmlに追記する -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.4/dash.all.min.js"></script>

---

useAudioController

useAudioPlayer を使って再生ボタンとプログレスバーを作る。

見た目は何も定義していないので css を定義する必要がある。 プログレスバーの伸縮は .progress-bar に scaleX() を指定しているだけ。

<div id="app-player" data-audio-src="xxxx.mp3" data-audio-format="mp3">
  <span class="playbtn"></span>

  <span class="progress-base">
    <span class="progress-bar"></span>
  </span>
</div>

属性

attribute	comment
data-audio-src	音声ファイルの URL を指定
data-audio-type	音声ファイルのフォーマットを指定。mp3、hds、hls、mseから指定。OGG 形式はmp3と記述
data-audio-state	自動で追加される。状態が格納される。再生中 play、停止中 stop、一時停止中 pause

クラス名

className	役割
playbtn	再生ボタン
progress-base	プログレスバーの枠
progress-bar	プログレスバーの伸縮部分

メソッド

useAudioController(option?:TAudioControllerOption)

useAudioController のインスタンスを作成。

import { useAudioController } from "@sygnas/simple-audio-player2";
const audioController = useAudioController();

オプション

param	default	comment
btnClassName	".playbtn"	プレイボタンのクラス名
baseClassName	".progress-base"	プログレスベースのクラス名
barClassName	".progress-bar"	プログレスバーのクラス名
attrSource	"data-audio-src"	オーディオソースを指定する属性
attrState	"data-audio-state"	状態を格納する属性
attrFormat	"data-audio-type"	ソースのタイプを指定する属性
sourceOption		useAudioSource 参照

setControllerWithSelector(selector:string)

オーディオコントローラーのセレクターを指定。 サンプルでは単体のコントローラーだが、複数同時にコントロールすることも可能。

// `.js-controller` が複数あるなら全てがオーディオコントローラーとして動作する
audioButton.setControllerWithSelector(".js-controller");

プロパティ

// 再生中のコントローラー番号が表示される
console.log(audioButton.nowPlayingControllerIndex);

property	comment
nowPlayingControllerIndex	現在再生しているコントローラー番号

---

useAudioButton

useAudioPlayer を使って簡易なオーディオ再生ボタンを作る。

属性

attribute	comment
data-audio-src	音声ファイルの URL を指定
data-audio-state	状態が格納される。再生中 play、停止中 stop、一時停止中 pause
data-audio-type	音声ファイルのフォーマットを指定。mp3、hds、hls、mseから指定。OGG 形式はmp3と記述

メソッド

useAudioButton(option?:TAudioButtonOption)

useAudioButton のインスタンスを作成。

import { useAudioButton } from "@sygnas/simple-audio-player2";
const audioButtom = useAudioButton();

オプション

param	default	comment
attrSource	"data-audio-src"	オーディオソースを指定する属性
attrState	"data-audio-state"	状態を格納する属性
attrFormat	"data-audio-type"	ソースのタイプを指定する属性
sourceOption		useAudioSource 参照

setButtonWithSelector(selector:string)

オーディオ再生ボタンのセレクターを指定。

audioButton.setButtonWithSelector(".js-audioplayer");

プロパティ

// 再生中のボタンが表示される
console.log(audioButton.nowPlayingButton);

property	comment
nowPlayingButton	現在再生しているボタン
audioPlayer	useAudioPlayer のインスタンス

---

useAudioPlayer()

useAudioSource に音声データを渡して再生・停止の管理。

メソッド

useAudioPlayer(option?:TAudioSourceOption)

import { useAudioPlayer } from "@sygnas/simple-audio-player2";
const audioPlayer = useAudioPlayer();
audioPlayer.play("foo.mp3", "mp3");

オプション

useAudioSource のオプション。

play(url:string, format:TMediaFormat)

オーディオを再生する。 format は mp3、hds、hls、mse のいずれかを指定。

stop()

オーディオを停止する。

pause()

オーディオを一時停止する。

プロパティ

property	comment
isPlaying	boolean 再生中なら true
audioSource	useAudioSource のインスタンス

---

useAudioSource

MP3、HLS、HDS、MSE 方式のオーディオソースを管理。 useAudioPlayer で使うものなので直接使うことは基本的にはない。

メソッド

useAudioSource(option?:TAudioSourceOption)

import { useAudioSource } from "@sygnas/simple-audio-player2";
const audioSource = useAudioSource(option);
audioSource.setAudioSource("foo.mp3", "mp3");

オプション

param	default	comment
hds.playlist	"/manifest.f4m"	HDS 方式のプレイリスト URL
hls.playlist	"/playlist.m3u8"	HLS 方式のプレイリスト URL
mse.playlist	"/manifest.mpd"	MSE 方式のプレイリスト URL
mse.autoplay	false	オーディオファイルを指定したらすぐ再生するか

setAudioSource(url:string, type:TMediaFormat)

オーディオソースを渡して HTML5 Audio にセットする

プロパティ

property	comment
audio	HTML5 Audio
dashPlayer	dash.js のプレイヤー
isSupportHds	HDS 形式をサポートするなら true
isSupportHls	HLS 形式をサポートするなら true
isSupportMse	MSE 形式をサポートするなら true
isSupportStream	HDS / HLS / MSE のいずれかがサポート
mediaFormat	setAudioSource() で指定されたフォーマット

---

checkSupportFormat

ブラウザの対応フォーマットをチェックする。

import { checkSupportFormat } from "@sygnas/simple-audio-player2";

const audio = new Audio();
isSupportHds = checkSupportFormat.hds(audio); // HDSを再生できるか
isSupportHls = checkSupportFormat.hls(audio); // HLSを再生できるか
isSupportMse = checkSupportFormat.mse(); // MedisSourceExtensionに対応しているか

License

MIT