パーツライブラリ - SPIker

2021/5/5公開
2021/7/13更新

概要

圧電スピーカーを使ってWAVファイルを再生するためのobniz用パーツライブラリ「SPIker」を開発しました。
再生可能なWAVファイルは任意のサンプリング周波数の"Signed 16ビットモノラル"です。
Raw PCM(＝ヘッダレス)にも対応しています。

圧電スピーカーで再生可能な周波数の特性上、WAVファイルはハイパスフィルタを通して400Hz以下をカットしておくと比較的鮮明に再生できます。
使用するスピーカーは直径3cm程度は無いと音量・音質ともに厳しいです。
またスムーズに再生するにはローカルコネクト下での実行を推奨します。

説明

クラス名は"SPIker"です。
処理の内部でSPIを1つ使用しています。
WAVファイルの指定はURIによる方法とBASE64文字列による方法、バイト配列の3パターンあります。ローカルファイルは使用できません。
また、WAV⇒1ビットPCM変換ツール「トイチビ」を使って変換した再生用バイナリデータを使って再生することもできます。(使用例)
obnizクラウドでの使い方に関してはパーツライブラリSPIkerをobnizのリポジトリに置いて効果音を鳴らすも参考にどうぞ。

仕様

wired("SPIker" , {signal, gnd, frequency} )

スピーカーに接続します。極性がある場合はsignalをプラス、gndをマイナスに指定してください。
frequencyはWAVファイルのサンプリング周波数です(省略可)。
省略時は44100Hzとなり、再生用バイナリデータへの変換時に11025Hzにダウンサンプリングされます。

<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="SPIker.js"></script>

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

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(SPIker);

  var speaker = obniz.wired("SPIker", { signal:0, gnd:1, frequency:22050 });
}
</script>

[async] convertFromURI(uri, isRaw)

引数で指定されたURIのWAVファイルを再生用バイナリデータに変換します。
httpまたはhttpsから始まるURIのみ指定可能です。(ローカルファイルは不可)
またHTMLとWAVファイルが同じドメイン上に存在する必要があります。
ドメインをまたぐとサーバがクロスオリジンを許可していない限りCORSエラーが出て変換に失敗します。
Raw PCMの場合はisRawにtrueを指定してください(isRawは省略可。省略時はfalse)。

<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="SPIker.js"></script>

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

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(SPIker);

  var speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
  var convertedData = await speaker.convertFromURI("https://～～～/sound.wav");
}
</script>

[async] convertFromB64(base64, isRaw)

引数で指定されたBASE64形式のWAVファイルを再生用バイナリデータに変換します。
マシンスペック次第ですがWAVファイルのサイズが大きい場合は変換中にブラウザが応答無しになる場合がありますが、
そのまま待機するとちゃんと処理が終わります。(概ね10MB以上の場合は出がち)
Raw PCMの場合はisRawにtrueを指定してください(isRawは省略可。省略時はfalse)。

<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="SPIker.js"></script>

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

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(SPIker);

  var speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
  var convertedData = await speaker.convertFromB64("BASE64形式のWAVファイル");
}
</script>

[async] convertFromByteArray(bytes, isRaw)

引数で指定されたバイト配列のWAVファイルを再生用バイナリデータに変換します。
Raw PCMの場合はisRawにtrueを指定してください(isRawは省略可。省略時はfalse)。

<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="SPIker.js"></script>

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

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(SPIker);

  var speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
  var convertedData = await speaker.convertFromByteArray([Byte配列]);
}
</script>

[async] play(data)

あらかじめ変換した再生用バイナリデータを再生します。

<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="SPIker.js"></script>

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

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(SPIker);

  var speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
  var convertedData = await speaker.convertFromB64("BASE64形式のWAVファイル");
  speaker.play(convertedData);
}
</script>

stop()

再生を停止します。

<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="SPIker.js"></script>

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

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(SPIker);

  var speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
  var convertedData = await speaker.convertFromB64("BASE64形式のWAVファイル");
  speaker.play(convertedData);
  speaker.stop();
}
</script>

使用例1 BASE64形式のWAVファイルを再生

<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>SPIker</title>
  <script src="https://unpkg.com/obniz@3.x.0/obniz.js"></script>
  <script src="SPIker.js"></script>
  
  <script>
  const data = "BASE64形式のWAVファイル";
  
  var obniz = new Obniz("OBNIZ_ID_HERE");
  
  var convertedData = null;
  var speaker = null;
  
  obniz.onconnect = async function () {
    Obniz.PartsRegistrate(SPIker);
  
    speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
    convertedData = await speaker.convertFromB64(data);
  }
  
  function play() {
    speaker.play(convertedData);
  }
  
  function stop() {
    speaker.stop();
  }
  </script>
  </head>
  
  <body>
  <p>
  <input type="button" value="Play" onclick="play();"><br>
  <br>
  <input type="button" value="Stop" onclick="stop();">
  </p>
  </body>
  </html>

使用例2 トイチビで変換済みデータを使って再生

<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <title>SPIker</title>
  <script src="https://unpkg.com/obniz@3.x.0/obniz.js"></script>
  <script src="SPIker.js"></script>
  
  <script>
  // ここに変換済みデータを配置
  const BINDATA = [
    0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,0xff,
    ～(省略)～
  ];
  
  var obniz = new Obniz("OBNIZ_ID_HERE");
  
  var speaker = null;
  
  obniz.onconnect = async function () {
    Obniz.PartsRegistrate(SPIker);
  
    speaker = obniz.wired("SPIker", { signal:0, gnd:1 });
  }
  
  function play() {
    speaker.play(BINDATA);
  }
  
  function stop() {
    speaker.stop();
  }
  </script>
  </head>
  
  <body>
  <p>
  <input type="button" value="Play" onclick="play();"><br>
  <br>
  <input type="button" value="Stop" onclick="stop();">
  </p>
  </body>
  </html>

ダウンロード

SPIker.js

戻る