メソッド・関数の呼び出しをJavaScriptからGoに変換できない．

Question

環境

・macOS Big Sur ver. 12.6 (21G115)
・MacBook Air M1, 2020　メモリ　8GB
・go1.18.3 darwin/arm64

やっていること

Go WebAssemblyでブラウザ上でGoを実行する その2 Go側からJavascriptを操作する

Web Audio APIでシンセサイザーを作って遊ぶ

この二つのサイトを組み合わせて，一つ目のサイトにおけるsrc/webassembly.goを，二つ目のサイトの440Hzでsin波を鳴らしているものに変更させ，Go言語からJavaSciptでWeb Audio APIを制御してシンセサイザーを鳴らそうとしています．
それぞれ単体では実行することに成功しました．

WebAssembly.go

package main
 
import (
	"syscall/js"
)
 
func main() {
	// グローバルオブジェクト(window)を取得します
	window := js.Global()
 
	// document オブジェクトを取得します
	document := window.Get("document")
 
	// bodyを取得します
	body := document.Get("body")
 
	// h1 のDOMを作成します
	h1 := document.Call("createElement", "h1")
	h1.Set("innerHTML", "Hello Webassembly!")
 
	// h1をbodyに追加します
	body.Call("appendChild", h1)
 
	// プログラムが終了しないように待機します
	select {}
 
}

sin波を生成するJavaScript

// デフォルト設定でAudioContextを取得
let ctx = new AudioContext()
// 基本的な音を発するオシレータのAudioNodeをコンテキストの中に作成
// 周波数は440Hz、波形はサイン波
let osc = new OscillatorNode(ctx)
osc.frequency = 440
osc.type = "sine"
// オシレータノードの出力をコンテキストのスピーカーに接続
osc.connect(ctx.destination)
// オシレータの処理を開始
osc.start()

上のJavaScriptを自分で書き換えてみたもの

package main
 
import (
	"syscall/js"
)
 
func main() {
	// グローバルオブジェクト(window)を取得します
	window := js.Global()
 
	// document オブジェクトを取得します
	document := window.Get("document")
 
	// bodyを取得します
	body := document.Get("body")
 
	ctx := js.Global().Get("AudioContext").New()
	osc := js.Global().Get("OscillatorNode").New(ctx)
	js.Global().Set("osc.frequency", 440)
	js.Global().Set("osc.type", "sine")
	js.Global().Get("document").Call("osc.connect", ctx.destination)
	osc = js.Global().Get("document").Call("start")
	body.Call("appendChild", osc)


 
	// プログラムが終了しないように待機します
	select {}
 
}

しかしこの状態でビルドを行うと．

MacBook-Air src % GOOS=js GOARCH=wasm go build -o ../docs/build.wasm
# sound_wav
./webassembly.go:21:54: ctx.destination undefined (type js.Value has no field or method destination)

のようになってしまい，成功しません．

https://zenn.dev/nobonobo/books/85e605893d44ebe7dd3f/viewer/b5ac64d9135e123e367a
このサイトや
ドキュメントの
https://pkg.go.dev/syscall/js
を読んではみたのですが，二つ目の引数はどのようにすればいいのかわかりませんでした．

教えてほしいこと

エラー部分の二つ目の引数の適切な入れ方．

追記

フィールド名にドットを使ってはいけない，フィールドはjs.Valueのものを使って取得する，とのご指摘を受けたので，考えた範囲で修正いたしました．

webassembly.go

package main
 
import (
	"syscall/js"
)
 
func main() {
	// グローバルオブジェクト(window)を取得します
	window := js.Global()
 
	// document オブジェクトを取得します
	document := window.Get("document")
 
	// bodyを取得します
	body := document.Get("body")
 
	ctx := js.Global().Get("AudioContext").New()
	osc := js.Global().Get("OscillatorNode").New(ctx)
	osc.Set("frequency", 440)
	osc.Set("type", "sine")
	osc.Call("connect", ctx.Get("destination"))
	osc.Call("start")
	body.Call("appendChild", osc)


 
	// プログラムが終了しないように待機します
	select {}
 
}

ビルドとmain.goの実行まではエラーが出ることなく進んだのですが，ブラウザで対象の場所に行っても音は鳴りませんでした．
ブラウザ上でコンソールを確認してみると以下のようなエラー文が出ていました．

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
syscall/js.valueNew @ wasm_exec.js:383
Promise.then (async)
(anonymous) @ (index):7

wasm_exec.js:349 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
syscall/js.valueCall @ wasm_exec.js:349
Promise.then (async)
(anonymous) @ (index):7
wasm_exec.js:22 panic: JavaScript error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
wasm_exec.js:22 
wasm_exec.js:22 goroutine 1 [running]:
wasm_exec.js:22 syscall/js.Value.Call({{}, 0x7ff800010000000a, 0x410028}, {0x114ef, 0xb}, {0x438f68, 0x1, 0x1})
wasm_exec.js:22 	/usr/local/go/src/syscall/js/js.go:389 +0x31
wasm_exec.js:22 main.main()
wasm_exec.js:22 	/Users/usrname/Go/make_sound/01/src/sound_wav/src/webassembly.go:23 +0xd

wasm_exec.js:101 exit code: 2
exit @ wasm_exec.js:101
Promise.then (async)
(anonymous) @ (index):7

最初のエラーについて調べてみたのですが
https://www.wizard-notes.com/entry/javascript/web-audio-api-chrome-user-interaction
のようなサイトを見るに，音を自動再生するのがchromeでは禁止されているのでnew AudioContextをしようというものとなっていました．
しかし，一応上のコードではインスタンスの作成はしていますし，Goを経由しない時には音が出せていたので，コードの構成上の問題ではなく，インスタンスの作り方が間違っているということなのでしょうか．

Comments

[退会済みユーザー]

直接の原因かどうかはわかりませんが
js.Global().Get("docuemnt")
は
js.Global().Get("document")
ではないでしょうか

[aaaa____]

ご指摘ありがとうございます，確かにスペルが間違っているようでした．
エラー内容は変わらなかったので直接的な原因ではなかったようですが，後々困ることになっていた要因だと思いますので，助かりました．ありがとうございます．
質問では修正させていただこうと思います．

Answer 1

• js.Value.Get(フィールド名)
• js.Value.Set(フィールド名, 値)
• js.Value.Call(フィールド名, params...)

これらのフィールド名にドット混じりは使えません。

osc := js.Global().Get("OscillatorNode").New(ctx)にてoscオブジェクトを取得したのであればそれを使ってください。

osc.Set("frequency", 440)

追記

<script>
  // デフォルト設定でAudioContextを取得
  let ctx = new AudioContext();
  // 基本的な音を発するオシレータのAudioNodeをコンテキストの中に作成
  // 周波数は440Hz、波形はサイン波
  let osc = new OscillatorNode(ctx);
  osc.frequency = 440;
  osc.type = "sine";
  // オシレータノードの出力をコンテキストのスピーカーに接続
  osc.connect(ctx.destination);
  // オシレータの処理を開始
  osc.start();
</script>

以上の記述のHTMLをブラウザで表示しようとすると、
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
この表記がコンソールログに出力されます。

「Goを経由しない時には音が出せていたので」というのとは合致しません。
音が出せていた時と状況が異なるようです。

ただ、僕がWebAudioを試しているときもこの条件でpanicが起きるので、
panicが起きちゃうとWASMインスタンスは終了してアクセス不能になります。
必ずユーザー操作イベントに紐づけてWebAudioの利用を開始するようにしていました。

実装例

https://zenn.dev/nobonobo/articles/42d999fee88a1d

Comments

[nobonobo]

例えば、`js.Global().Get("document").Call("start")`
documentにstart関数などは存在しないです。

[aaaa____]

いくつか質問させていただきたいです．

・Getの引数のdocumentは，syscall/jsの公式ドキュメントのことで，documentにある関数とは，ドキュメントのサイトに書かれているもの，という認識でよろしいでしょうか．

・フィールド名にドット混じりは使えないことは了解しましたのですが，第二引数のctx.destinationの部分はどのように対処すれば良いのでしょうか．oscの要素とは異なるので，ctxを省略することはできないとは思うのですが，どのように回避するのか現状まだ理解できておりません．
だめ元で"ctx.destination"としてみましたが，ビルドは通ってもhttp://localhost:8080/に訪れても音は鳴りませんでした．

フィールド名を修正したものを追記として質問内容に加えさせていただいております．

[nobonobo]

「JSのあらゆる値」をGoの世界に持ち込むとすべて「js.Value型」にラップされます。
これは「JSの値」のリモコンのようなものです。

コツはJS世界ではこう、Goの世界ではこうという鏡の世界の表と裏のようなイメージを持つとよいです。
「document」が持っているフィールドやメソッドについてはブラウザのJS用リファレンスをみてください。
Go側のリファレンスには「document」の解説はありません。

まずJSのやり方を把握し、それをGoで書くためにはどう書くかという視点で
syscall/jsのドキュメントをみましょう。
この道を進むにはJSの知識とGoの知識の両方が結局のところ必要です。
（だからJSだけで書くほうが手っ取り早く目的にたどり着ける）

GoではJSのフィールドにGoのやり方でアクセスすることはできません。
（そもそもよそから持ってきたオブジェクトの小文字のフィールドはGoではプライベート扱いなのでアクセスはできません）
js.Valueの操作を通じてJSにおけるオブジェクトのフィールドを取得してください。

「ビルドは通っても」とありますが、ビルドにエラーになるはずなのですがそうでないのには何か理由がありますか？

[nobonobo]

ああ、もしかして文字列で渡してみたということですか。
「osc.Call("connect", "ctx.destination")」これをJSに戻すと「osc.connect("ctx.destination")」となります。これはJS側でエラーが発生しているのではないでしょうか。（ブラウザのコンソールログを確認する習慣を持ちましょう）

[aaaa____]

丁寧な解説ありがとうございます．

文字列で渡したという認識で正しいです．ブラウザのコンソールを確認すべきなのに気がつきませんでした．JavaScriptを制御しているので当然のことでした．申し訳ございません．

>>js.Valueの操作を通じてJSにおけるオブジェクトのフィールドを取得してください。
に対して，
osc.Call("connect", ctx.Get("destination"))
と対処してみたところ，テキストエディタ側では問題なくビルドすることができたので，main.goを実行してブラウザを開いたのですが音は鳴らず，コンソールを確認してみるとエラーが確認されました．
返信欄でのコード埋め込みの方法がわからないので質問内容に追記のような形で載せておこうと思います．

[aaaa____]

>>>ユーザー操作イベントに紐づけてWebAudioの利用を開始するようにしていました

というのはやはりサイトにもあるように，ボタンを押して音を再生するのようなことですよね．少し試してみることにします．
音が鳴らないことに関しましては，Chromeの性質のことからくることなのか，それとも私が修正した引数の入れ方やコードが間違っているのどちらになるのでしょうか．
エラーが出ていることからコードが不適切なのではと感じるのですが，ここからどこを修正できるのか検討がついておりません．

こちらの手元で「Goを経由しないやり方」としましては，参考にしていたサイトのやり方にのっとり，
どこかのサイトで開発者ツールを開いてそのコンソール上に以下のコードを記述してエンターを押すというもので，実際に今こちらの手元でやってみても問題なく「ぽー」という音が鳴るのですが．これはおかしいやり方なのでしょうか．

// デフォルト設定でAudioContextを取得
let ctx = new AudioContext()
// 基本的な音を発するオシレータのAudioNodeをコンテキストの中に作成
// 周波数は440Hz、波形はサイン波
let osc = new OscillatorNode(ctx)
osc.frequency = 440
osc.type = "sine"
// オシレータノードの出力をコンテキストのスピーカーに接続
osc.connect(ctx.destination)
// オシレータの処理を開始
osc.start()

[nobonobo]

それはエンターを押すのを契機に動き始めているのでうごきます。
これはユーザビリティや安全のためにブラウザの実装がこうなっています。サイトを開いただけで音が鳴ったり録音されたりすると不快だったり悪用されかねませんので。

[nobonobo]

ユーザー操作を契機にならし始めるなら動作します。一度でもこれを突破すれば以後は任意のタイミングで鳴らせます。

[nobonobo]

追記のサンプルではゲームスタートボタンでいったん音を鳴らしていますが、これが必要です。
その後はプログラムの条件で音が鳴らせます。

[aaaa____]

カウントアップに使っていたコードを用いて試験的に，次のようにしたらきちんと音が鳴ってくれました．

こちらの理解不足により長い時間をかけさせてしまい申し訳ありません，
とても助かりました，ありがとうございます．

```
package main

import (
"syscall/js"
"fmt"
"strconv"
)

func main() {
// グローバルオブジェクト(window)を取得します
window := js.Global()

// document オブジェクトを取得します
document := window.Get("document")

// bodyを取得します
body := document.Get("body")

// p のDOMを作成します
counter := 0
p := document.Call("createElement", "p")
p.Set("id", "counter")
p.Set("innerHTML", strconv.Itoa(counter))

// ボタンのDOMを作成し、Clickイベントを設定します
btn := document.Call("createElement", "button")
btn.Set("textContent", "count up!")
btn.Call("addEventListener", "click", js.FuncOf(func(js.Value, []js.Value) interface{} {
counter++
fmt.Println(counter) // console.logに出力します
ctx := js.Global().Get("AudioContext").New()
osc := js.Global().Get("OscillatorNode").New(ctx)
osc.Set("frequency", 440)
osc.Set("type", "sine")
osc.Call("connect", ctx.Get("destination"))
osc.Call("start")
body.Call("appendChild", osc)
return nil
}))

// pをbodyに追加します
body.Call("appendChild", p)
// ボタンをbodyに追加します
body.Call("appendChild", btn)

// プログラムが終了しないように待機します
select {}

}
```