牟田口

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/

 

0

Microsoft Edge においてダイジェスト認証を完了できない場合があります

IT技術情報です。
Microsoft Edgeは、ダイジェスト認証が通らないパターンがあるようです。
わすれないようにメモ。

 

こっちはOK

http://192.168.1.1/index.html
http://192.168.1.1/?

 

こっちはNG

http://192.168.1.1/ 
http://www.microsoft.com/


情報源

Microsoft Edge においてダイジェスト認証を完了できない場合があります

https://support.microsoft.com/ja-jp/help/3163423

0

2018年06月28日 commonsnet総会発表 NetCommons3の困った事 あるあるの対応方法(技術者向け)

commonsnet総会発表向けに資料作成しました。
残念ながら発表時間がおして、時間がなかったため、資料公開します。
内容は技術者向けとなっています。

0

packagistで使うcomposer.jsonのlicenceに独自ライセンスを設定する

こんにちは、オープンソース・ワークショップの牟田口です。
IT技術ネタです。

packagistが最近になって、composer.jsonのlicenceの書き方を厳密に見るようになったようで、
下記のエラーメールが届きました。

--- 注釈
・packagistは、composerでパッケージバージョン管理してるメインリポジトリです。
・composerは、phpのパッケージバージョン管理ツールです。
・composer.jsonは、composerの設定ファイルです。
---

 

--- エラー内容

「件名」
netcommons/videos failed to update, invalid composer.json data

「本文」
The netcommons/videos package of which you are a maintainer has
failed to update due to invalid data contained in your composer.json.
Please address this as soon as possible since the package stopped updating.

It is recommended that you use `composer validate` to check for errors when you
change your composer.json.

Below is the full update log which should highlight errors as
"Skipped branch ...":

[Composer\Repository\InvalidRepositoryException]: Some branches contained invalid data and were discarded, it is advised to review the log and fix any issues present in branches

Reading composer.json of netcommons/videos (3.1.7)
Importing tag 3.1.7 (3.1.7.0)

(省略)

Reading composer.json of netcommons/videos (master)
Importing branch master (dev-master)
Skipped branch master, Invalid package information:
License "NetCommons License" is not a valid SPDX license identifier, see https://spdx.org/licenses/ if you use an open license.
If the software is closed-source, you may use "proprietary" as license.


なにやら、composer.jsonのLicense "NetCommons License" は、SPDX license(https://spdx.org/licenses/)に該当してないよ、との事。
NetCommons Licenseは、FreeBSD Licenseを基にした独自のOSSライセンスなんだよなぁ。
という事で、SPDXのライセンスにない場合の書き方を調べました。

 

--- 対応方法

SPDXのライセンスにない場合の書き方をする。
  (composer.jsonの修正例)

"license": "LicenseRef-NetCommons",
"license-ref-net-commons": "https://raw.githubusercontent.com/NetCommons3/NetCommons3/master/license.txt",

 

--- 情報元link

SPDXのライセンスにない場合は、こう書くらしいです。
https://spdx.org/spdx-specification-21-web-version#h.1v1yuxt

issueにもこんなのあがってました。
https://github.com/composer/composer/issues/2152

修正例
https://github.com/NetCommons3/Videos/blob/master/composer.json#L25-L26

 

--- その他の対応方法

メールの修正方法に従う。
 1) SPDX license(https://spdx.org/licenses/)に修正する。
(composer.jsonの修正例)

"license": "BSD-2-Clause-FreeBSD",

 

 2) クローズしたソースなら、ライセンスを"proprietary"にする。
(composer.jsonの修正例)

"license": "proprietary",

 

以上、参考なればうれしい限りです。

0

#イクメン日記 - 最近見てるTV番組

さんきゅうパパプロジェクト2016/10/24から約1年間、育児休業を取得しています。

ご無沙汰ぶりです、牟田口です。
とりあえずブログ投稿できる位には落ち着てきました。

最近NHKを見る機会が増えました。 
パパ1年生の自分にとって、子育てや保護者の立場も1年生なので圧倒的に知識や経験が足りません。

たまたまテレビをつけたら気になる番組がやってたので、nasneに毎週録画してチェックしてます。
結構ためになりますよ。

すくすく子育て(Eテレ 毎週土曜 午後9:00~9:29)
http://www.nhk.or.jp/sukusuku/
子育ての悩みとか、専門家(大学の先生とか)の意見が参考にしてます(実際やれるかどうかは別問題(汗))

ウワサの保護者会(Eテレ 毎週土曜 午後9:30~9:55)
http://www4.nhk.or.jp/hogosya/
他の家庭の保護者はこんな事考えてるんだ、へー。と思ってみてます。各々の家庭の違いが聞けます。

 ではでは

0