簡単！プロセスのボタン（とスクリプト）を使ってシンプルなオーディオプレーヤーを作ってみる

こんにちは。
リーデックス小川です。

今回はプロセスのボタン（とスクリプト）を使ってシンプルなオーディオプレーヤーを作ってみます。

プロセスはワークフローを実装する機能として説明されることが多いのですが、簡単にコマンドボタンとして追加でき、スクリプトを設定することができます。

これを利用して、再生や停止などのボタンとして使用するよう設定してみます。

業務利用というよりもエンタメ要素が強いですが、動くと面白い内容ですのでぜひ試してみてください。

実装する内容

実装する内容は以下のとおりです。

• 再生する音楽ファイル(MP3など)を登録できるようエディタで設定する。
• スクリプトでaudioタグを生成し添付されたmp3ファイルを設定し、トータル時間と現在の再生時間を設定する。
• プロセスで、再生、一時停止、停止ボタンを作成する。

順番に設定していきます。

再生する音楽ファイル(MP3など)を登録できるようエディタで設定する

まずは、音楽ファイル登録するための画面をエディタで作ります。

細かい設定は特に不要ですが、添付ファイル（AttachementA）、トータル時間（ClassA）、再生時間（ClassB）が編集画面に表示されるよう設定します。

スクリプトでaudioタグを生成し添付されたmp3ファイルを設定する

続いて、下記をスクリプトに登録します。スクリプトの出力先は「編集」をチェックしてください。

$p.events.on_editor_load = function(){
  $("#Results_AttachmentsAField").after(`<audio id="music" src="${$("#AttachmentsA\\.items a:first").attr("href")}"></audio>`);
  
 const audio = $("#music")[0];

  // 時間を 00:00:00 形式に整形
  function formatTime(seconds) {
    if (isNaN(seconds) || seconds=="") return "00:00:00";
    var h = Math.floor(seconds / 3600);
    var m = Math.floor((seconds % 3600) / 60);
    var s = Math.floor(seconds % 60);
    
    // ゼロ埋め関数
    function pad(n) {
      return (n < 10 ? "0" : "") + n;
    }
    return pad(h) + ":" + pad(m) + ":" + pad(s);
  }

    // 音声のメタデータ読み込み完了時（duration が使えるようになる）
    $("#music").on("loadedmetadata", function() {
       $("#Results_ClassB").val(formatTime(audio.currentTime)); // 現在の時間
      $("#Results_ClassA").val(formatTime(audio.duration)); // 全体の時間
    });
    
    // 再生中に定期的に呼ばれるイベント
    $("#music").on("timeupdate", function() {
      $("#Results_ClassB").val(formatTime(audio.currentTime)); // 現在の時間
    });
}

簡単にスクリプトを説明します。

添付ファイルの一番最初の音声ファイルを <audio> タグとして表示し、再生や時間の表示を行えるようにしています。

具体的には次のような動きをします。

1. 音声プレイヤーの生成
   添付ファイル一覧から最初のファイルの URL を取得し、そのファイルを再生する <audio> タグを画面に追加します。

2. 時間の表示形式の整形
   再生時間を「00:00:00（時:分:秒）」形式に変換する関数を用意しています。1桁の場合も「01:05:09」のようにゼロ埋めして表示されます。

3. 全体時間と現在時間の取得
   音声のメタデータが読み込まれた時点(loadedmetadataイベント)で、音声全体の長さを取得し、指定したフィールドに表示します。また、再生中は timeupdate イベントで現在の再生時間を取得し、リアルタイムに更新します。

補足：audioタグについて

audioタグは、Webページに音声ファイル（mp3 など）を埋め込み、再生・一時停止・音量調整といった操作を可能にするタグです。

ブラウザ標準のプレイヤーUIを表示したり、JavaScriptから自由に制御することもできます。

プロセスで、再生、一時停止、停止ボタンを作成する

最後に、プロセスボタンの登録を行います。「再生」「一時停止」「停止」のそれぞれのボタンが表示されるよう３つのプロセスを登録します。

登録内容はほぼ一緒で、OnClickのスクリプト部分のみ異なります。以下、「再生」の登録内容についての登録例です。

「再生」「一時停止」「停止」で違うところは、名称とOnClickのみで、その他は同じ内容となります。OnClickの内容はそれぞれ下記となります。

再生

$("#music")[0].play(); 

音声を再生します。

一時停止

$("#music")[0].pause(); 

現在の位置で一時停止します。再度 play() を実行すると続きから再生されます。

停止

$("#music")[0].pause();$("#music")[0].currentTime = 0;

音声を一時停止したあと、再生位置を先頭（0秒）に戻します。次に再生すると最初から始まります。

テスト

上記設定が終わったら、テストをしてみます。

任意の音楽ファイルを登録すると、トータル時間に曲全体の時間が表示されます。再生ボタンをクリックすると音楽が流れ、一時停止、停止をクリックすると曲が止まります。

スクリプトでも説明がありましたが、一時停止は次に再生をクリックしたときに続きから、停止は次に再生をクリックしたときに最初から曲が再生されることを確認してみてください。

まとめ

今回はプロセスを使ってスクリプトとプロセスを使ってシンプルなオーディオプレーヤーを作ってみました。サンプルは最低限の機能だけですが、早送りや自動再生も同じ用に実装できますので興味のある方はぜひチャレンジしてみましょう。

このように、プロセスを利用することで、コマンドボタンの追加とそのボタンにスクリプトを簡単に設定することができます。色々と応用が効きますので、ぜひ活用してみてください。

弊社では、スクリプトやスタイルを利用したカスタマイズについてご支援させていただいております。スクリプトについて相談したい、業務を改善のために実現したい機能がある、や、本記事や過去の記事のスクリプトを応用したい、などありましたら、お気軽にお問い合せください。

また、今回のサイトパッケージがほしい方もお問い合わせいただければお渡しいたします。こちらもお気軽にお申し付けください。

それでは、今回はこの辺で。
最後までご覧いただき、ありがとうございました。