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

Jsfiddleにサンプル・コードを書きました。

https://jsfiddle.net/kajironpu/46Lrne74/

発音ボタンをクリックすると読み上げが始まります。
アイコンにCSSで動きをつけたいのですが、「読み上げ中」のときだけ、アイコンに動きをつけにはどうしたらいいのでしょうか?(サンプル・コードは、常時アイコンが動作しています。)(読み上げが終わればアイコンのアニメーションが停止するようにしたい)
スピーカーから音がなっている間だけフラグがONになればそのときだけアニメーションのCSSを実施して、OFFになればアイコンを通常のものに上書きすればいいのか?とも考えたのですが何かいい方法があれば是非教えてください。宜しくお願いします。

回答の条件
  • 1人50回まで
  • 登録:2017/09/14 09:36:53
  • 終了:2017/09/24 09:40:06

ベストアンサー

id:psne No.1

ぽけっとしすてむ回答回数511ベストアンサー獲得回数2852017/09/14 16:22:55

ボタンにclass名を追加/削除する事で実現できます。
https://jsfiddle.net/psne/nce8mhaw/


APIドキュメントには

  • 発音させる内容
  • 声の性別や質
  • 動作時の設定

などのオプションの指定方法がありますので、そちらも合わせてご確認ください。

※元のコードをあまり変化させないよう回答しましたが、個人的には通常時を「アニメーション無し」として発音中にアニメーションする方が、手直しをする際に分りやすいかと思います。

他3件のコメントを見る
id:psne

正確には「通常時と同じアイコンを透明にしたり、不透明にする」指示となります。
アイコンはすべての状態で「一つ」しかなく、変化しているのは透明度だけ となります。

CSSにある「opacity」は、要素の不透明度を指定するものです。
https://developer.mozilla.org/ja/docs/Web/CSS/opacity

2017/09/15 11:27:14
id:kajironpu

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

transform-origin: 50% 50%;

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

2017/09/15 11:40:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません