初心者にもわかるファイルメーカーの
使い方

Filemakerで効果音を鳴らしたい

2021-12-08 |  

こんにちは、山本です。
業務管理システムって色々なボタンが沢山あるので、気分が萎えますよね。
そんなとき、ボタンを押下したときに効果音が鳴り響けば、なんかちょっと面白そうじゃないですか。

なので今回は、Filemakerで好きな効果音を鳴らしてみようという内容になります。
具体的には、名簿に登録したデータを削除したときに、爆発音がなる。という風にしてみましょう。

・方針

Filemakerで効果音をならす場合、色々な実現方法があると思いますが、今回は以下の手順で実現したいと思います。

1.好きな効果音のmp3を用意する
2.mp3をbase64でエンコードする
3.webビューアにjavaScriptを記述して、エンコードした音源を読み込ませる
4.filemaker から javaScriptを実行して音をならす

・1.好きな効果音のmp3を用意する

今回はフリー音源を提供している魔王魂様から、”爆発06”をmp3でダウンロードします。
提供サイト:https://maou.audio/category/se/

・2.mp3をbase64でエンコードする

mp3をbase64でエンコードすることによって、音源ファイルをテキストデータに置換します。
今回は以下のサイトからエンコードしました。

提供サイト:https://base64.guru/converter/encode/audio/mp3
エンコード後の長文のテキストデータは後ほど使います。

・3.webビューアにjavaScriptを記述して、エンコードした音源を読み込ませる

ではFilemakerでデータベースを作っていきます

テーブル

・共通データ

・名簿

・リレーション

共通データテーブルに、htmlを記述して管理したいので、リレーションはデカルトで繋ぎます。いろんな種類の効果音を鳴らしたい場合は、効果音マスタとして別テーブルで管理するのがいいでしょう。

共通データテーブルは1レコードのみ作成し、効果音データに先ほどエンコードした音声データをコピペして、HTML_Baseフィールドに以下のテキストを入力しておきます。

data:text/html,<!DOCTYPE html>
  <meta charset="utf-8">
  <script type="text/javascript">
       var soundData = "data:audio/mp3;base64,@エンコードデータ@";
     function playSound(){
       let sound = new Audio(soundData);
       sound.play();
    };
  </script>
</html>

・レイアウト

名簿のレイアウトを適当に作成して、webビューアを画像のように配置します。

※設定のjavaScriptによる---という項目にチェックをつけるのを忘れないようにしましょう。(filemaker 19からの機能になります。)

※webビューアのオブジェクト名を必ず設定しましょう

(今回はwebSoundと命名しています。)

・4.filemakerからjavaScriptを実行して効果音をならす

・スクリプト

事前に入力しておいたhtml_Baseのデータを参考に、効果音の音声データを置換することで、読み込むhtml文を完成させます。
そして、webビューアのオブジェクト名と、htmlに記述した関数名を指定します。
※webビューアが読み込むのに時間がかかって音がならない場合があるので、一時停止の時間を調整することで解決する場合があります。

あとはレコードを削除するだけです。

このスクリプトを名簿レイアウトに配置したボタンに設定して完成です。

ゴミ箱ボタンを押下すると、爆発音が鳴りながら、レコードが削除されるようになりました。

・まとめ

はたして、効果音を鳴らしたいという需要はあるのか疑問ですが、技術的に可能という事実が大切なのです。ええ。