作曲・指導・C言語・Linux

金沢音楽制作

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

Simple HTML5 Audio Player for Pure JavaScript

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

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

プレイヤーの特徴

  • 並列的にプレイヤーを設置できること
  • 再生すると直前のプレイヤーが一時停止すること
  • 軽量であること
  • Pure JavaScriptで書かれてること
《トリオ・ソナタ？》
《海岸線がみた夢》
《Cordes et Distance》

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

ダウンロード

最新バージョン
バージョン ダウンロード サイズ 公開日 備考
0.9d shap_v09d.zip 6.8KB 2023-07-13 軽微なバグを修正
過去のバージョン
バージョン ダウンロード サイズ 公開日 備考
0.9 shap_v09.zip 4.2KB 2020-07-29 配布終了
0.9a shap_v09a.zip 5.5KB 2020-09-07 配布終了
0.9b shap_v09b.zip 5.5KB 2020-09-24 配布終了
0.9c shap_v09c.zip 7.2KB 2020-11-06 配布終了

プレイヤーの設置方法

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

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

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

プレイヤーは、htmlファイルのプレイヤーを設置したい位置に<div>にclass="shap"とdata-src="[FilePass]"を記述した一行を追加します。この時、figureタグで囲みます。自信はないのですが、一つのファイルに付き、一つのfigureタグを使います。

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

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="shap" data-src="./trioSonata_96.mp3"></div>
</figure>

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

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

プレイヤーの操作方法

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

カラーの変更

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

CSSの修正箇所

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

/* Color */
div.shap {
  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.shap > div.time {
  color: cornflowerblue;
}

JavaScriptの修正箇所

JavaScriptは、shap.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
  • 更新日：2020-11-06
  • 更新日：2023-07-13
  • 更新日：2024-08-03