はじめに

複数のタブを処理するときは、プラグインのbackground.jsで行いますが、それが大変頭をひねることになります。
今回は、複数のブログタブと複数の音声プレーヤータブが動作するケースです。

例として、アメバのブログとQiitaの記事で、それぞれで、リンクで音声プレーヤーのタブを生成しています。音声ファイルは、別々のものです。以下にその詳細についてご説明いたします。

サンプルのタブの例

この画面の最上部にあるタブを切り出したのが、以下のタブ図です。

ここに、アメバのタブとQiitaのタブがあります。それぞれのタブで、音声メッセージのリンクをクリックするとWavプレーヤーのタブが開かれて、音声が流れるようにしています。

Wavプレーヤーのタブは2つあります。それぞれが個別のwavファイルを再生します。スピーカーマークの付いたタブが音声プレーヤータブです。

タブ処理の仕様について

ここで、タブ処理の仕様を考えてみます。ここで、行いたいことは、以下の点です。

・アメバのブログの中に、音声メッセージのリンクを追加しておきます。そのリンクをクリックすると、その音声メッセージのタブが開かれてそこで再生がスタートします。同様に、Qiitaのタブの記事の中にも音声メッセージのリンクを追加しておきます。そのリンクをクリックすると、次は、Qiitaの音声メッセージのタブが開かれてそこで再生がスタートします。

このように、アメバか、Qiitaの記事を開いて、中にある音声メッセージのリンクをクリックするたびにタブが開かれて、音声が再生されるようにします。

問題1
ここで、困ることは、音声メッセージリンクをクリックするたびに、音声タブが開かれてしまうことです。そうすると、同じ音声メッセージが次から次へと開かれてしまうことです。これをやめるには、同じ音声ファイルの場合は、2つ目からは、タブを開かないようにすることです。

問題2
アメバタブのブログに、1つ以上の音声メッセージリンクがある場合です。この時は、音声メッセージが異なるため、クリックしてタブを開いて、その音声メッセージを再生するようにします。

問題3
複数の音声メッセージのタブがあると、それぞれのタブで音声が流れ、よく聞き取れなくなります。
その場合は、他の音声タブのプレーヤーを一時停止させなければなりません。

問題4
アメバのタブの中の音声メッセージリンクを立て続けにクリックして行くと音声タブが続けて開かれて音声が流れます。このような場合は、2つ目以降の音声タブを削除するようにしなければなりません。

このようなケースでのタブ処理を実装することはかなり、神経を使うことになります。
今現在、まだ、正常な処理を実装するようにはなっていません。しばらく、時間がかかります。

今回のテストページです。

その中の音声メッセージのリンクで確認できます。
その前に、WavBackPlayプラグインをインストールしておきます。以下からダウンロード(任意のフォルダーへ解凍(※)して、chromeの拡張機能へインストールできます。(※)7-Zipを使用しています。

WavBackPlayプラグインのダウンロード

プラグインの特長
このプラグインでは、ブログ内の音声メッセージリンクをクリックすると、音声プレーヤーが別タブで開きますが、すぐに元のブログタブをアクティブにしています。但し、音声は流れています。(autoplay loop指定しています。)
また、続けて音声メッセージリンクをクリックして、音声タブを開いても、前のタブは削除して、最新の音声プレーヤータブのみ表示するようにしています。

BANDICAMの超簡単な使い方(マイクのテスト用)

あとがき

今は一部のみ実装できていますが、上の処理を実装するには、まだ、時間がかかります。完成した暁には、公開できるとおもいますので、ご了承願います。