ブログ記事内でも使えるメディアプレイヤー plyr の設置 (はてなブログもOK！)

　ブログ記事で音声（オーディオ）ファイルを再生したい時、youtube や googleドライブなどネットサービス側が提供するプレイヤーを使うか、html5だとaudioタグを使います。
しかし、ビデオ再生ならまだしも音声ファイルを再生するプレイヤーとしては仰々しいものが大半だったり、機能不足だったりします。
jQueryを使ったプレイヤーもありますが、モバイル環境に対応していないものが多かったります。

そこで紹介したいのが、「Plyr」というプレイヤーです。
Java-scriptとCSSで動作し、動画ファイルやYouTubeなどの再生、字幕・音声トラック指定など、音声ファイルの再生、音量調整や再生速度も初期設定・変更もできるスグレモノです！
しかも、モバイルブラウザーにも対応。

はてなブログでも簡単に設置できるので、何かと利用できると思います。

今回は、音声再生をメインに紹介します(^^)/
例：
　翻訳した文章を読んだ音声ファイルを再生
　音楽オーディオファイルの再生
　など。

以下は、Plyr 3.5.3 (現時点の最新版)についてです。

Plyr

plyr.iogithub.com

サポートしているブラウザー

・Safari
・Mobile Safari *
・Firefox
・Chrome
・Opera
・Edge
・IE11 *
・IE10 *

* Mobile Safari、IE11 および 10 についてはGitHubの説明を参照してください。

Plyrの設定

1. ヘッダーに以下の2行を追加

モジュールファイル等を設定できないブログなどの場合、CDN経由で使います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.3/plyr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.5.3/plyr.css" />

2. プレイヤーを表示したい箇所にaudioタグを設置

例：
<audio id="player" controls>
<source src="https://www.dropbox.com/s/2vxrs8gi815yne9/test.mp3?dl=1" type="audio/mp3" />
</audio>

※複数プレイヤーの設置は、GitHubの説明を参照してください。

3. フッターなどにスクリプトを設定

例：
<script>
const player = new Plyr('#player', {});
</script>

※複数プレイヤーの設置は、GitHubの説明を参照してください。

オーディオ再生プレイヤーのサンプル

　以下の日本語をGoogle翻訳で英語、すランス語、ドイツ語、ロシア語、中国語(簡体字)に変換し、音声出力したものです。
正しいかどうかは知りませんよ(^^ゞ

「日本の観光は楽しいです。
　あなたは、東京オリンピックも、観光も楽しんで、2倍の楽しみがあります。」

英語 (English)

Sightseeing in Japan is fun.
By enjoying the Tokyo Olympics and sightseeing, you can enjoy twice as much.

フランス語 (Le français)

Faire du tourisme au Japon est très intéressant.
Vous pouvez vous amuser deux fois plus en profitant des Jeux olympiques et des visites touristiques de Tokyo.

ドイツ語 (Deutsch)

Sightseeing in Japan ist sehr interessant.
Sie können doppelt so viel Spaß haben, wenn Sie die Olympischen Spiele in Tokio und die Sehenswürdigkeiten besichtigen.

ロシア語 (русский)

Достопримечательности в Японии очень интересные.
Вы можете наслаждаться вдвое больше удовольствия, наслаждаясь Олимпийскими играми в Токио и осмотром достопримечательностей.

簡体字

日本的观光非常有趣。
享受东京奥运会和观光，您可以享受两倍的乐趣。

普通にオーディオファイルで！

For Fruits Basket (アニメフルーツバスケット TVサイズ)

オーディオでよく使うであろうオプション

サンプル：
　const player = new Plyr('#player', {
　　autoplay: true,
　});
　読み込み後、自動再生します。

① controls
　使用または表示するコントロール。
　関数が渡された場合、メソッドはコントロールに対して要素またはHTML文字列を返すと想定されています。
　(default array) ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']

② settings
　デフォルトのコントロールを使用している場合は、メニューに表示する設定を指定できます。
　(default array) ['captions', 'quality', 'speed', 'loop']

③ autoplay
　ロード時にメディアを自動再生します。
　これは一般的にお勧めできません。
　(default boolean) false

④ volume
　プレーヤーの初期音量を表す0から1の間の数値。
　(default number) 1

⑤ muted
　再生を開始するかどうかをミュートにします。
　(default boolean) false

⑥ speed
　selected：再生のデフォルト速度です。
　options：メニューに表示するオプション。ほとんどのブラウザは0.5より遅く再生することを拒否します。
　(default object) {selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }

オーディオでよく使うであろうセッター

サンプル：
　player.volume = 0.5; // Sets volume at 50%
　player.currentTime = 10; // Seeks to 10 seconds

① volume
　プレーヤーの音量を設定します。
　0.0から1.0の間の浮動小数点数。

② speed
　プレーヤーの速度を設定します。
　オプションの標準的な指定。
　(0.5, 0.75, 1, 1.25, 1.5, 1.75, 2)

③ currentTime
　プレーヤーのcurrentTimeを設定します。
　秒単位でfloatを指定。

デフォルトのコントロールを使う

　標準のコントロールをそのまま使用したい場合は、オプションを渡す必要はありません。

　以下がずべての項目のリストです。
　controls: [
'play-large', // The large play button in the center
'restart', // Restart playback
'rewind', // Rewind by the seek time (default 10 seconds)
'play', // Play/pause playback
'fast-forward', // Fast forward by the seek time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'mute', // Toggle mute
'volume', // Volume control
'captions', // Toggle captions
'settings', // Settings menu
'pip', // Picture-in-picture (currently Safari only)
'airplay', // Airplay (currently Safari only)
'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
'fullscreen', // Toggle fullscreen
　];