音声を再生するアプリを作ってみよう〜JavaScript版、Python（Brython）版サンプルアプリ〜

Monaca Educationで、音声を再生するアプリを作ってみましょう。

サンプルプロジェクトと、以下の説明を参考にして、自分たちの開発するアプリに音声再生機能を組み込んでみてください。

サンプルアプリの動作

サンプルアプリは、ボタンが１つあるだけのシンプルな画面です。このボタンをクリックすると、音声が流れます。なお、音声ファイルは、弊社の提供するサンプルアプリ「ソーメンタイマー」から流用しました。

音声再生サンプルアプリ（JavaScript版）

音声再生アプリ（Python版）

アプリ内に、音声ファイルを組み込んであります（フォルダwwwの下に音声ファイルを置いています）。アプリの内部で音声を合成しているのではありません。

プロジェクト内に音声ファイル（JavaScript版）

プロジェクト内に音声ファイル（Python版）

index.htmlに、ボタンなどの画面の要素を記述しています。

JavaScript版では、index.htmlの中のタグ<script>に、音声再生に関係するプログラムを含めています。

Python版では、python.pyファイルにプログラムを書いています。

今回のサンプルアプリでは、ファイルindex.htmlの中で、タグ<audio>を使い、その音声ファイルを読み込んでいます（これはJavaScript版、Python（Brython）版の両方に共通です）。読み込むだけで、再生はしていません。


<audio id="start-mp3" preload>
<source src="audio/start.mp3" type="audio/mp3" /></audio>

JavaScript、Pythonのプログラムからは、このタグ<audio>で読み込んだ要素を指定し、あらかじめ備わっているplay()という関数を呼び出して、音声ファイルを再生しています。

言い換えると、JavaScriptやPythonから、HTML（とWebブラウザ）が持っている音声ファイルの再生機能を呼び出している、ということになります。

JavaScrip版のプログラムの、対象部分は以下です。


function playSound() {
    let startSound = new Audio('start.mp3');
    startSound.play();
}

Python版のプログラム（python.pyに記述されています）の、対象部分は以下です。


def playSound(ev):
    soundFile = document["start-mp3"] 
    # JavaScriptのdocument.getElementById("start-mp3") に該当
    soundFile.play()

なお、サンプルアプリでは、ユーザーがボタンをクリックしたら、音声を再生するようにしました。

JavaScrip版のプログラムの、その仕組みの部分は以下のようになっています。index.htmlのタグ<input type=”button”>の属性onclickに関数呼び出しを指定しています。


<input id="startButton" type="button" value="再生" 
       onclick="playSound()"/>

Python版の該当部分は次のとおりです。ptyhon.pyの中で、関数playSound()を定義したあと、ボタンがクリックされた時に関数playSound()を呼び出すように（ボタンと関数を）関連付けています。


document["startButton"].bind("click", playSound)

この記事の最後に、自身で開発するアプリに音声再生機能を組み込むために、行わなければならないことを整理しておきましょう。

まず、何らかの手段で音声ファイルを作成します。アプリの中にちょっとした効果音を入れる程度の音声であれば、無料の音声編集ソフト（OSに付属していたり、Webに公開されていたりします）で作成できます。
作成した音声ファイルを、Monaca Educationプロジェクトにアップロードします。
音声ファイルは、HTMLファイルの中で、タグ<audio>を使って読み込んでおくようにします。そうすると、プログラムの中で読み込みを行う手間が省けます。
読み込んだタグ要素を、正しい名前で指定して取得し、関数play()で再生します。関数play()をいつ呼び出すかは、アプリごとの要件次第です。

今回はクリック操作に関連付けましたが、サンプルのヒントにした「ソーメンタイマー」では、タイマーと関連付けていました。「何かのイベントが起きたら、関数を呼び出す」というふうに作ることで、様々なタイミングで音声を流すことができるようになります。

適切なタイミングで音声を再生するようにすると、ユーザーとアプリの間の関係が広がります。

ぜひ音声再生に取り組んでみてください。