Javascriptで音声に合わせてアイコンに動きをつけたいと試みています。

ぽけっとしすてむさん、ありがとうございました。

APIのほうを確認しました。start / stopでcall backを利用できるのですね。

コードありがとうございました。

このコードは、スタートを押したら、 btn.classList.remove("stop-flash");で

停止の画像をremoveするので通常のアニメーションが動きだすのでしょうか？

読み上げが終わったら、 btn.classList.add("stop-flash");で

通常の画像をもう一度、addするため、アニメーションの画像が上書きされる

という意味でしょうか？


ちなみに、スタートしたらアニメーションをaddする
終わったら、通常画像をadd するというので試してみたら、だめでした。
この場合は、どうして動かないのでしょうか？？



// 発音開始時に呼び出されるもの
function hatuon_hajime() {
btn.classList.add("double-flash");
}

// 発音終了時に呼び出されるもの
function hatuon_owari() {
btn.classList.add("stop-flash");
}

ありがとうございまス！！これがすごくわかりやすいです。
固定のスピーカーアイコンと、点滅用を分けてCSSにつくっておくのですね。

ふむふむ。

最初は、固定のアイコンを出しておく。

音声ONのときに　 btn.classList.add("js-flash-animation");

アニメを追加する。→アイコンが上書き。

音声OFFのときは、 btn.classList.remove("js-flash-animation");

アニメーションをremoveする。
つまり、下に隠れていた、通常アイコンが表示される。

とても理解できました。ありがとうございます！

なるほど、透明度でアニメーションを作っているですね。
もともとのデフォルトの画像には

transform-origin: 50% 50%;

これを設定しておくのですね。
ありがとうございます。