作曲・浄書・指導・音響

金沢音楽制作

金沢音楽制作では、楽曲・楽譜の制作と、作曲や写譜などレッスンを行っています。

Simple HTML5 Audio Player for Pure JavaScript

Simple HTML5 Audio Player(shap)は、素のJavaScriptで書かれた、HTML5で動作するシンプルなオーディオプレイヤーです。

本プログラムは、オープンソースではありません。まだベータ版なので、OSI(Open Source Initiative)に準拠していません。そのため、改変しての使用は許可しますが、再配布することは認めていません。

プレイヤーの特徴

  • 並列的にプレイヤーを設置できること
  • 再生すると直前のプレイヤーが一時停止すること
  • Pure JavaScriptで書かれてること
  • 軽量であること

バグが見つかりましたら、「お問合せ」よりご報告いただけると、助かります。ぼくのプログラミング力で直せる範囲でしたら直します。

ダウンロード

最新バージョン
バージョン ダウンロード サイズ 公開日 備考
0.9a shap_v09a.zip 5.5KB 2020-09-07 他のCSSに依存していたのを修正
最新バージョンの内容物一覧
ファイル名 サイズ 備考
player.js 8KB プログラム本体
player.css 3.8KB CSSデザイン
player.woff2 1.8KB フォント(サブセット済)
過去のバージョン
バージョン ダウンロード サイズ 公開日 備考
0.9 shap_v09.zip 192B 2020-07-29 配布終了

[目次へ]

プレイヤーの設置方法

htmlのhead内に、Simple html5 playerのJavaScriptとCSSファイルのパスを記述します。scriptタグには、htmlファイルのパースが完了してから実行されるdefer属性を指定してあるので、htmlファイル内のどこに記述しても問題ありません。

次の例では、カレントの一つ上の階層(../)にshapのディレクトリを設置しています。

<head>
  <link href="../shap/player.css" rel="stylesheet">
  <script defer src="../shap/player.js"></script>
</head>

プレイヤーは、htmlファイルのプレイヤーを設置したい位置に<div>にclass="player"とdata-src="[FilePass]"を記述した一行を追加します。

<div class="player" data-src="./trioSonata_96.mp3"></div>

MozillaのMDN Web docsの「<audio>: 埋め込み音声要素」によると、<audio></audio>は、図版扱いのようでfigureタグで囲まれています。

追記:W3CのHTMLチェッカーによると、「Element figcaption not allowed as child of element figure in this context. (Suppressing further errors from this subtree.)」と表示されます。つまり、figcaptionは、figure要素の最初か最後に設置するのが正しく、途中に入れてはいけないみたいです。したがって、キャプションを複数入れる場合は、キャプションごとにfigureで囲む必要があります。

<figure>
  <figcaption>《トリオ・ソナタ?》</figcaption>
  <div class="player" data-src="./trioSonata_96.mp3"></div>
</figure>

<figure>
  <figcaption>《海岸線がみた夢》</figcaption>
  <div class="player" data-src="./kaigansenGaMitaYume_96.mp3"></div>
</figure>

<figure>
  <figcaption>《Cordes et Distance》</figcaption>
  <div class="player" data-src="./cordesEtDistance_96.mp3"></div>
</figure>

[目次へ]

プレイヤーの操作方法

  • 再生ボタン「▶」をクリックすると、再生が始まります。再生中のプレイヤーは、一時停止アイコン「」に変化し変色します。
  • 一時停止アイコン「」をクリックすると、その場で停止して、「▶」アイコンに戻ります。もう一度クリックすると、その場から再生が始まります。
  • 停止ボタン「」を押すと、再生が停止してかつ曲頭に戻ります。
  • シークバーは、再生中、停止中ともに操作可能です。つまみをスライドさせなくてもシークできますが、「プチッ」「ボッ」といったポップノイズが入ることがあります。
  • 再生中の曲が曲尾に達すると、プレイヤーは停止して曲頭に戻ります。

では、設置方法で例示したコードを実際に動かしてみましょう。

《トリオ・ソナタ?》
《海岸線がみた夢》
《Cordes et Distance》

[目次へ]

カラーの変更

カラーを変更するには、エディタでJavaScriptとCSSファイルの両方を変更する必要があります。

CSSの修正箇所

player.cssの12行目あたりから始まる「/* Color */」変更します。

/* Color */
div.player {
  border: 1px solid darkgray;
}

div.ctrl > div.play,
div.ctrl > div.pause {
  color: ivory;
  background-color: darkgray;
}

div.ctrl > div.play:hover,
div.ctrl > div.pause:hover {
  background-color: dodgerblue !important;
}

div.player > div.time {
  color: cornflowerblue;
}

JavaScriptの修正箇所

JavaScriptは、player.jsの300行目超にあるchangeActiveColor()のactiveとinactiveの二つの定数を変更します。

function changeActiveColor(i, s) {
  // Color
  const active = 'dodgerblue';
  const inactive = 'darkgray';

[目次へ]

ブラウザの対応状況(2020年7月)

パソコンから

パソコンの主要ブラウザからは、理想通り動作します。

パソコンのブラウザ
ブラウザ バージョン 動作 備考
Google Chrome 83
Firefox 78
Safari 13
Edge 83
Opera 69
Opera Neon 1 スライダー操作時にミュートされない
pointerイベントに未対応?
Internet Explorer 11 JavaScriptのES2015(ES6)未対応

iOSのブラウザ

スライダーを操作した時のミュートは、EventListener('pointer')という機能を利用しています。これは、iOS13から実装された機能です。したがって、iOS12以前でスライダーを操作した時は、ミュートが行われない可能性があります。

iOS 13
ブラウザ バージョン 動作 備考
Safari 13
Google Chrome 83
Firefox 27
Edge 45
Opera Touch 2

Androidのブラウザ

Androidは、全体的に動作するものの、どこか不安定な印象があります。

Android 10
ブラウザ バージョン 動作 備考
Google Chrome 83
Firefox 68
Edge 83
Opera 59 シークバーの挙動が不安定
Yandex Browser 20

[目次へ]

参考にしたサイト

本プログラムを作成するに当たって、特に参考にしたサイトを紹介します。サイト名・作者名「記事名」最終投稿日、の順で記述します。最後の項は、本来は筆者が閲覧した日を記述するのが通例ですが、記憶があやふやなので、プレイヤーが完成した段階での最終投稿日にしました。これらの情報がなければ、完成しませんでした。感謝に堪えません。

[目次へ]

[ノート一覧へ]

更新情報

  • 公開日:2020-07-29
  • 更新日:2020-09-07
  • 更新日:2020-09-24