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

こんにちは、牟田口です。

Monacaはウェブ上でスマートフォンアプリを作成できる、アプリ開発プラットフォームサービスです。


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

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

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

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

 

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/