WebAudio APIを使って、ブラウザで音声も気軽にプログラミングできます。


myvoice
こっそり始められてしまうとセキュリティ的にリスクがあるため、タッチやクリックしてスタート。まずはシンプルにマイクから出力へとつないで、自分の声を聞いてみました。間にいろいろと入れるとボイスチェンジャーになります。 const init = async (stream, audioCtx) => { // 入力(ソース)を出力(デスティネーション)に直結! const source = audioCtx.createMediaStreamSource(stream); source.connect(audioCtx.destination); }; 簡単ですね!

この簡単なコードを実現するヘルパーコードはこちら // クリックしてスタートを実現するコード const audioInit = (callback) => { const div = document.createElement("div"); div.textContent = "CLICK ANYWHERE TO START"; document.body.appendChild(div); const audioInitInner = async () => { div.remove(); document.body.removeEventListener("click", audioInitInner); if (!navigator.mediaDevices.getUserMedia) { throw new Error("getUserMedia not supported on your browser!"); } const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const audioCtx = new AudioContext(); callback(stream, audioCtx); }; document.body.addEventListener("click", audioInitInner); }; audioInit(init); このaudioInitをESモジュール化して、使い回せばシンプルに音声アプリをいろいろ量産できますね!

最初AirPodsで試していると気になったレイテンシー(遅れ)、100msec単位で遅れあり。
有線のイヤホンに変えてみるとほぼリアルタイムで自分の声が聞こえました。お手持ちのいろいろな機材でお試しください。

中学生の頃、MSXturboRの音声録音機能で遊んでいたことを思い出します。音を使ったこども向けアプリづくりも楽しそう。

コンピューター言語」を使ってコンピューターとはなそう!
キーボードが気に入った1歳児でも使えるBASICよりも更に優しく、音のフィードバックが楽しい MML(エムエムエル)がオススメです。

10 CLS 20 INPUT S 30 PLAY #901 40 IF SOUND() CONT ELSE RUN RUN

IchigoJam BASICで4行プログラムして、実行。入力待ちとなるので、CDE と入力してエンター。ドレミと鳴ります!(RUN on IchigoJam web)

CDE2CDE2GEDCDED2

チューリップ(基本は4分音符、数字を付けると長さが変わる)

T200CDE

テンポ200で速く!(標準はT120)

CDE>CDE<CDE

オクターブアップとオクターブダウン
IchigoJamで音楽づくり PSG単音での音遊びから、MIDIキーボード&MIDI音源をつないだ本格DTMまで

MMLは解釈できない文字で停止するので、デタラメ入れても壊れにくいので安心。おもちゃにどうぞ!


IchigoJam BASIC 1.5b07 ファームウェア (RISC-V版 IchigoJam R用)
- IchigoJam 1.5β7
シリアル通信のポートをプルアップに変更
(書き換えには IJUtilities が便利です)

jigインターンで知ったWebAudio APIをラップするサウンドライブラリTone.js。 少し使ってみましたが、ちょっと使い方にクセがありますね。現代風に何か使いやすくしたい感じです。

Tone.mjs デモ
3種類だけのシンプルなドラムセット drums1.mjs を作って使ったサンプルです。

toneKick.play();

これだけでキックが鳴ります。(プログラム全文 on GitHub

Tone.jsをnpmでビルドした後、ESモジュール化する、簡単なDenoのプログラム makemjs.js を通して、Tone.mjs を生成しています。 Tone.mjs をimportして、必要な機能を作って使えて便利ですね。

試してみたい方、zipファイルでダウンロードして、singletone.html をブラウザで開いて鳴らしてみてください。 drums1.html で、シンプルなドラムセットを鳴らせます。

ローカルな mjs を import する drums1_usemjs.html を動かす場合は、live-server など、手元のPCでwebサーバーを動かして使う必要があります。 (詳細は、Denoはじめのいっぽを参照ください)

Tone.js の音楽入門、作曲入門、かなりステキなのでオススメです!
Get started | Learning Music (Beta)

IchigoJam morseを使ってくれたJO3GBDさんより、非対応だった文字のモール符号のご提案! せっかくなので、Ascii-Morse(アスキーモールス)としての標準化を目指して、GitHubにCSVデータ、JSONデータ、C言語のプログラム生成プログラムとして公開しました。
IchigoJam/ascii-morse


IchigoJam morse にも組み込んでみました。SOUND-GNDにLEDを接続すると音を見ることができます。

ファームウェアはこちら。データが消えても大丈夫な、お手元のIchigoJamでお試しください。(保存は1ファイルのみ対応)
- IchigoJam morse β2 for LPC1114


ascii-morse/ascii-morse.csv at main · IchigoJam/ascii-morse
ちょっと速めの設定ですが、こちらの表と見比べながらいろいろ触ってみると、だんだん慣れていきますよ!

IchigoJamのボタンでモールス信号を打って、入力できるバージョンも楽しそう!

links
- JO3GBD-IchigoHam
- IchigoJamでモールス:デジットの「赤外線モールス通信機」 を試してみました (その1) |JO3GBD - ブログ
- IchigoJam電子工作パーツセット 赤外線モールス信号機 送受セット / MORSE-jamP
- IchigoJam モールス信号エンコーダー アルファベット編

CyberFridayで初発表された福井高専発の自作ミュージックシーケンサーTracksのファームウェアづくり開始。 ひとまず文字とMIDI出力を確認!

以前IchigoJamと接続して遊んだ、MIDI楽器、KORG volca beatsをTracksで鳴らしている様子。


Tracks付属の240x240の液晶ST7789のデバイスドライバを通じて、Hello STM32F405 と表示。開発言語は現在はC言語。音づくりや、作曲用に向いた言語をサポートするのもおもしろそうです。(参考、オーディオプログラミング言語 Advent Calendar 2020 - Qiita

TracksとMacは、Nucleoを経由して、st-linkで書き込み。--resetをつけると書き込み後自動起動してくれて便利。

$ st-flash --reset write build/tracks_f405.bin 0x8000000

TracksのCPU、STM32F405RGは、最大168MHz、浮動小数点ユニット付きの32bit Cortex-M4、Flashは1MB。豪華!

はじまりました、ものづくりイベント、NT鯖江2020!
(10/3-4、11:00-17:00 at 鯖江商工会議所1F SCC)。


ユニークな展示がじっくり楽しめる2日間、鯖江市長選挙と合わせてどうぞ!
以下、ブースの写真レポートです!


チューンドお人形さん!


IchigoJamの同人誌!


なぜか子供が惹かれてしまうパズル!IchigoJamコマンド版とか作りたい


高電圧と静電気で駆動する自作コンデンサヘッドホン!


水引き+LED!


高専プロコン競技部門を勝手に開催する、囲みますリアル大会、初開催!


大人気だった、抵抗の形のはんだごて陶芸品!


アマビエさまになれるハコ!


自動演奏ピアニカ!


自作の曲がるディスプレイ!


漆塗りのピニカとFPV化されたラジコン!


鯖江だし、光るメガネ!


外側は当時のままで中身はリニューアルするというステキ改造ゲーム機!


ほっぺをふにふにできるVRデバイス、自作!


懇親会のCOMP料理!

44.1kHzで、440Hzの矩形波を鳴らそうとしても、サンプル数は100.23と割り切れないため、どうしてもずれます。実際鳴るのは100サンプル周期の441Hz。 正弦波であれば補間が聞くのでちゃんと440Hzで鳴ります。

波形量子化聴き比べアプリ / waveform sound test

高い周波数になるほど顕著、1838Hzを鳴らそうとすると1917.391Hzと4.32%もずれます。四捨五入しても2%以上ずれてしまうのが現実です。

そこでハイレゾ音源の出番、384kHzを使うと、0.44%まで誤差を縮めることができます。

それでも起きる誤差、解決方法は、ハードウェアから作ってしまうか、生楽器をサーボなどで鳴らすこと。ものづくりへの追求はつきません。


Oculus Quest DK2購入のきっかけ、@GOROmanさん、着鯖!


次回、会場として活用も検討する。SCC地下へ。


実験!

#NT鯖江 Twitter検索でもどうぞ!


NT鯖江2020」2020/10/3-4土日開催 @SCC

links
- NT鯖江2020 2日目レポート - NT鯖江

IchigoJam BASIC 1.4.3をリリースしました。
累計発行ライセンス65536、ついに符号なし16bitで表現できない域へ!
栃木工業高校の生徒が設計したIchigoJam互換機、SkyBerryJAMも祝1,000ライセンス突破!

記念に、IchigoJamで音を使ったシンプルで楽しい例を紹介します。
題して「しゃべるIchigoJam」

音声合成ボードを使うわけではありません。付属のサウンダーのみでOKです。

FORI=1TO15:BEEP15+RND(15):WAIT5:NEXT

15だらけのこのプログラム、何かしゃべってるように聞こえましたか?
色々数を変えて、遊んでみましょう!

IchigoJam BASICで、プログラミングの楽しさを覚えた人にオススメ、JavaScript。
PCNこどもプロコンなどで、パソコンを手に入れたらはじめてみましょう!
ブラウザが入ってネットにつながっていれば誰でもすぐにはじめられます。
JSはじめのいっぽ

じゃみじゃみの音で赤ちゃんが泣き止むらしい。高品質なノイズは落ち着く音なのかもしれない。周りの音、ホワイトノイズでかき消してしまえるのでは? JavaScript(JS)と384kHzデバイスを使って、検証してみます。

ブラウザで音を鳴らす「WebAudio API」で使っている「createScriptProcessor」は、「AudioWorkletProcessor」に役目を移すようです。 ただ、Safariでは対応していないので、両対応したホワイトノイズを鳴らすアプリ、作ってみました。単なる乱数ではなく、生成される値が正規分布になる正規乱数にするのがポイント。

WhiteNoise
周りの雑音、見事かき消してくれました。音楽を聞きながらでは集中できないけど、まわりの音が気になる時、ホワイトノイズという選択肢はいかがでしょう? なんとなく、人の声や、何か音楽が聞こえてくるのが不思議です。48kHz、96kHz、192kHz、384kHz、いろんな周波数で聞いてみてください。

384kHzで鳴らすホワイトノイズ、#NT鯖江 で出展します。気になる方、ぜひ視聴しにいらしてください!

NT鯖江2020」2020/10/3-4土日開催 @SCC

Switchなど、ファミコンを再現するエミュレーター、気になるのは音の違い。記憶の音とは何かが違う。その原因が384kHz音声出力デバイスと音プログラミングで判明! 44.1kHzでは全然足りなかった。

音は空気の振動。1982年に発売されたCDは、その振動を1秒間を44,100回に分けてデジタル化した(強さは16bit、65536段階)。 40年近く経ち、記憶容量も処理速度も段違い、映像はSDから4K/8K/レティナへと深化したのに音はそのまま44.1kHzが主力。

MacBook Pro、確か高音質化できたはずと思ったら、なんと対応は2013年〜2015年モデルまで。Utility、Audio MIDI Setupでの変更は44.1kHzか48kHzかのみだった。 ショックなのでデバイス探し、コンパクトなDAC(デジタルアナログコンバーター)を発見。設定を変更すれば、そのままWebAudioでもその音質で使えることが判明!


FC音源テスト
ファミコンの6502ほぼ互換のCPUに内蔵された音源、通称FC音源の解析を元にWebAudioでの再現コードを作成。384kHzで聞くとなかなかの再現度に感動。 そうそう、この音!


Audio MIDI Setup で、再生周波数を落とすほどに別の音が混ざって濁っていくのが確認できた。stopで一度とめて、設定変更、startで再生周波数が変えられる。 また、独特の三角波も、ひとまず周波数を数値で変更できるようにしてみた。低音の響きがいい感じ!

実は、これでも完全な再現はできていない。簡単な計算で疑似乱数を計算し続けるノイズ、値を切り替える周期の設定は16段階だが最も高速な0に設定すると、一番高速ファミコンのCPUの周波数、1,789,772.5Hzの半分、894.88625Hzでの切り替えていたことになる。 384kHzの4倍、1536kHzまで到達しても微妙な周波数の差を保管せざるを得ず、やはり完全再現はハードウェアづくりが必要そう。

Amazon MUSIC HDには、96kHz/24bitの曲が多量にあっていい感じ。 圧縮されたメディアでは伝わらないこの感動、NT鯖江で展示するので、ハイレゾ音源、ハイレゾ再現FC音源も展示するので、どうぞ遊びにきてください!(240fps、ハイレゾディスプレイも!)


NT鯖江2020」2020/10/3-4土日開催 @SCC


今回使った、384kHz/32bitサウンド出力デバイス、なんと、1,699円!
MELODAY タイプC イヤホン 変換ケーブル Type C 変換 3.5mm イヤホンジャック イヤホン変換アダプター DAC ハイレゾ 音楽再生/音声通話/音量調節 iPadPro2018 Xperia XZ2/XZ3 HUAWEI Google Pixel 3/2 Samsung などに対応
MacBook Pro、デバイスドライバーなどインスール不要ですぐ使える。USB-Cにイヤホンの延長として接続されて、見た目もすっきり!音好きな方にオススメ!

links
- GPU音源で遊ぼう!GLSL x WebAudioでつくるリズムマシン、来週末はNT鯖江@SCCへどうぞ!
- GLSLはじめのいっぽ、シンプルなサウンドイコライザーづくり

GLSLを使った音のビジュアライズに続き、音源として使うGLSLに挑戦!
数式だけで生成するキック、スネア、ハイハット。

float kick(float t) { return sin(6.283 * 53.0 * t - 10.0 * exp(-50.0 * t)) * exp(-t * 1.3); } float snare(float t) { return noise(t) * max(0.0, 1.0 - min(0.85, t * 4.25) - (t - 0.25) * 0.3); } float hihat(float t) { return noise(t) * exp(-t * 200.0); }

(参考、GLSLで音楽(はじめに) by @gaziya5
PSG音源、FM音源、PCM音源に続く第4の音源!? GPU音源もガッツリ楽しめそうな予感。


GPU音源 - リズムパターン基本」(src on GitHub)
ランダムにパターンを切り替えている内に、どこにもなかった音楽に出会えるかも。 MacのChromeで動作確認。スペックが足りず処理が間に合わない場合は、bufsize level を大きくしてみてください。 リアルタイムに演奏する楽器としては11.61msecは目指したい!


jigインターンOB部長が創業した、株式会社ハックツ主催のものづくり好き学生のためのハックツハッカソンにオンライン参加!


キャンプ上で便利で楽しいツールがテーマ!女子エンジニアによるデータに基づく説得力あるプレゼンと、実装力がよかった!!

優勝、おめでとう!

いろいろ創ったらお披露目する場もほしいですね!

2020/10/3-4土日開催、NT鯖江2020、開催場所を1Fに変更しました!


会場の鯖江商工会議所1Fロビー、目の検査のCマーク型の机、NT鯖江の展示ブースとして使います。(SCC)


ゆったりできるカフェ付き、ソファーコーナーでゆっくりできます。


鯖江の逸品、並んでます、あのパソコンにあの帽子のミニチュアも!?

駆け込み、展示もおまちしてます!
2020/10/3-4 「NT鯖江2020

GPUを使ったシェーディング言語、GLSLを使って、音楽を可視化してみよう!
Shadertoyは、ブラウザ上ですぐに試せて、プログラミングできるサンプルがたくさん!
まずはシンプルなポップにホップするサウンドイコライザーを作ってみました。


hop_light_8 - Shader - Shadertoy BETA
1画面に収まるシンプルなプログラム。C言語風なので、ちょっとプログラミングしたことある人ならすぐに改造して試せるはず。


プログラムの下に並ぶ、Channel0をクリック、プリセットの曲をいろいろと変更してみましょう。


Microphoneにすると、PCのマイク入力に連動してリアルタイムに動くようになります。キーボードや、カメラも使って連動させるのも楽しそうですね!


フルスクリーンにして動かしたり、プロジェクターにつないでパーティーを盛り上げたりできますね!(DMX512照明と組み合わせるともっと楽しい)

GLSL(OpenGL Shading Language)で手軽に使えて楽しい、並列処理が得意なコンピューター、GPU。 28段階のチュートリアルで学べる「GLSL 2D Tutorials」おすすめです! 音の変態曲ビジュアライズ好きの方もぜひ!

links
- GPU音源で遊ぼう!GLSL x WebAudioで創ったリズムマシン

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS