Monacaで<audio>タグを使って音楽再生と正解・不正解の音を鳴らす #iOS

会社ブログからの転記記事です。

Monacaとは

Monacaはウェブ上でスマートフォンアプリを作成できる、アプリ開発プラットフォームサービスです。
HTML5でiOS & Android 向けのアプリを同時開発できます。
https://ja.monaca.io/

料金

無料プランと有料プランがあります。

有料プラン
https://ja.monaca.io/pricing.html

無料プラン
https://ja.monaca.io/free-plan.html

やってみた内容

Monacaを使って、下記をやってみました。
クイズアプリなどを作るときに使えると思います。

BGMを自動再生する
正解・不正解の音をボタンを押したときにならす

ただし、Monacaの公式ドキュメントでは「HTML5の audio タグは、iOS端末では正常に動作しない可能性があります。」との事でした。
iphone7の実機で確認したところ再生できました。他機種について再生できるか不明ですので、実機で確認されるのが良いかと思います。

BGM,正解・不正解のmp3は、サイトからダウンロードして、wwwフォルダにアップロードしました。

Monaca設定等

Monacaのテンプレート：最小限のテンプレート

BGM：http://www.hmix.net/music_gallery/music_top.htmの優しい・癒しの曲「Dear Childhood Friend」

正解音：https://soundeffect-lab.info/sound/anime/の「ラッパのファンファーレ」

不正解音：https://soundeffect-lab.info/sound/anime/の「運命2」

ソース

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        // 参考：HTML5のaudio要素とJavaScriptで作るオーディオプレイヤー
        // https://mae.chab.in/archives/1975
        function playSound1(){
            audio = new Audio('trumpet1.mp3');
            audio.play();
        }
        function playSound2(){
            audio = new Audio('fate2.mp3');
            audio.play();
        }
    </script>
</head>
<body style="text-align: center">
    <!-- 
        <audio>タグ。背景ミュージック。autoplay=自動再生、loop=ループ再生 
        参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio#Attributes
    -->
    <audio src="n46.mp3" autoplay loop></audio>
    <!-- 開発中に再生の停止ボタンを表示する場合は、下記を使う -->
    <!-- <audio src="n46.mp3" autoplay loop controls></audio> -->

    <button onclick="playSound1()">正解</button>
    <button onclick="playSound2()">不正解</button>
</body>
</html>

Monaca画面

参考リンク

音楽の再生方法 | Monaca Docs
https://docs.monaca.io/ja/sampleapp/tips/media/