パーツライブラリSPIkerをobnizのリポジトリに置いて効果音を鳴らす

2021/5/13公開

概要

obnizのリポジトリに外部パーツライブラリSPIkerを置き、同じくリポジトリ上に置いたWAVファイルの効果音を鳴らす方法についてまとめました。

手順

①リポジトリにパーツライブラリとWAVファイルをアップロードします。
音声ファイルがWAV形式以外の場合はあらかじめツール等で44.1KHz16ビットモノラル(チャンネル数1)のWAV形式に変換しておきます。

自分のリポジトリに置いたファイルは"https://obniz.com/users/{user_id}/repo/{file_name}"という形式のURLでアクセスすることができます。
{user_id}に入るユーザIDはリポジトリから"公開ページ"ボタンをクリックする際に表示されるページのURLから知ることができます。
(下記画像の赤で塗りつぶしている部分)
URLの指定例:https://obniz.com/users/0000/repo/hoge.html

②下記サンプルコードを参考にプログラムを作り、リポジトリにアップロードします。(0000は自分のユーザIDに置換)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>効果音テスト</title>
<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="SPIker.js"></script>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");

var okSound = null;
var ngSound = null;
var speaker = null;

obniz.onconnect = async function () {
    Obniz.PartsRegistrate(SPIker);
    
    speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
    okSound = await speaker.convertFromURI("https://obniz.com/users/0000/repo/ok.wav");
    ngSound = await speaker.convertFromURI("https://obniz.com/users/0000/repo/ng.wav");
}

async function playOK() {
    speaker.play(okSound);
}

async function playNG() {
    speaker.play(ngSound);
}
</script>
</head>

<body>
<input type="button" value="OK" onclick="playOK();"><br>
<br>
<input type="button" value="NG" onclick="playNG();">
</body>
</html>

③リポジトリで実行ボタンを押して実行します。

実行例(動画)

戻る