<midi-player> の再生、一時停止を JavaScript (jQuery)で制御したい。

Question

このMIDIを再生できるやつ を使ってMIDIを再生しています。

↑
このような再生プレイヤーが表示されるのですが、
この再生ボタンを使わずに、自分で作成したボタン(特定の処理)で再生一時停止などしたいと考えています。

そこで、

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.22.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.3.0"></script>

<!--『id="player"』を付けた-->
<midi-player id="player" src="file.mid" sound-font visualizer="#myVisualizer"></midi-player>

const playersrc = document.getElementById('player');

//クリック
playersrc.addEventListener('click', butotnClick);
//もしくは再生？
playersrc.play();

とすれば再生ボタンのクリック(もしくは再生)出来るかな？
などと試してみたのですが上手くいきませんでした。

---

そこで、再生ボタンを押したら何か変わるのかを見てみました。

↑<midi-player>はこのようになっていて、

再生ボタンを押したら、『div.controls.stopped』が

『div.controls.playing』となっていることがわかりました。

おそらく、

$('.controls').on('click', function(){
    $(this).toggleClass('playing');
})

のような感じに出来るといいのかな？と思うのですが、
jQueryはあまり弄ったことがないのでよくわかりません。
『$(this).toggleClass('playing');』の部分はいい線行ってると思うのですが...。

---

今予想していることが正しいのかの判断もできていませんが、
<midi-player>を自分で操作することについてアドバイスいただけるとありがたいです。

Answer 1

start()、stop()を紐付ければできると思います。

https://github.com/cifkao/html-midi-player/blob/master/src/player.ts

<midi-player id="player" src="file.mid" sound-font visualizer="#myVisualizer"></midi-player>
<button onclick=player.start()>再生</button>
<button onclick=player.stop()>停止</button>

Comments

[Knomono]

回答ありがとうございました。非常に助かりました。