JavaScript

Web上で動くタイマーを作る④終了時に音楽を鳴らす

スポンサーリンク




こんばんは!

今回は音楽の鳴らし方についてです。

第1回、第2回、第3回を見ていない方は、そちらから見ていただければ幸いです。

Web上で動くタイマーを作る①setIntervalを使う

Web上で動くタイマーを作る②スライダーを使用する

Web上で動くタイマーを作る③ボタンと処理

また、4回までで完成するプログラムはこちらで動かすことができるので、確認してみてください。

audioタグを使う

HTML5のaudioタグを使えば簡単に記述することができます。

src属性でファイルを指定、loop属性でループ再生します。

audioタグの間はaudioタグがサポートされていない環境で表示するメッセージを記述します。

プログラムに追加する

前回のプログラムに追加します。

playaudioメソッドとstopaudioメソッドを追加し、startメソッドとstopメソッドの中から呼び出しています。

※audioタグ内のsrc属性から呼び出している"alert.mp3"は適宜修正して実行してください。

これで完成です、お疲れ様でした。

終わりに

今回のコードよりもっといい機能やいいデザインが思いついたら、どんどん付け足して独自のタイマーを作っていただければと思います。

第1回から最後までお読みいただきありがとうございました。

少しでも皆様のお役に立てたなら幸いです。

スポンサーリンク




-JavaScript

Copyright© 物を作る者 , 2020 All Rights Reserved.