【jQuery】【音声処理】集中したいときに!Sound for Concentration

音楽

今回はjQueryを使用した音声再生アプリのご紹介です!

各ソースは以下にありますので、javascriptやjQueryを勉強中で何か作ってみたい!
と思っている方がいればよければ参考にしてみてください!

SoundForConcentration-master

この記事を読むと
  • スライドバーの実装ができる
  • 音声再生の方法がわかる

Sound for Concentrationとは

さっそく今回作成したアプリ「Sound for Concentration」のご紹介です!

とりあえずつかってみたいという方はこちらからどうぞ。

Sound for Concentrationは雨や風といった自然音や鳥やセミの鳴き声を
任意の組み合わせ、音量で再生することができるアプリです。

集中して作業をするためには「自然音」が効果的ということで作成してみました!

使い方は簡単で、再生したい音のスライドバーを調節して
スタートボタンを押すだけです!

SFC-使い方

※音量には注意してください

作成時のポイント

ポイント

作成におけるポイントをご紹介します。
ソースコードについては以下から落とすことができますので
実際に動かしてみたい方がいれば参考にしてみてください。
SoundForConcentration-master

Bootstrapの準備

まずはスライドバーを簡単に実装するためにBootstrapを使うための準備をします。

添付したhtmlの以下部分が対象になります。

Bootstrapの導入方法については下記記事でも紹介していますので
よければご覧ください。

おすすめ

とにかくすぐにBootstrapを使いたい!5分で簡単導入

スライドバーの実装

Bootstrapが使えるようになったら、次はスライドバーを表示してみます。

以下のコードがスライドバーの実装部分になり、
type属性で「range」を、value属性で初期値として「0」を指定しています。

スライドバーの表示ができたら続いてはjavascriptです。

下記のコードでは、スライドバーが動かされたタイミングで
今の音量がどのくらいなのかをバー下のテキストを変更して数値でわかるようにしています。

音声の再生

音声再生における作業は次の3ステップです。

  1. 再生用ファイルの準備
  2. html側にaudio(音声ファイル)の指定
  3. play関数で再生

再生用ファイルの準備

これは任意をファイルを準備してください。
添付したサンプルでは「sound」ディレクトリにmp3ファイルを格納しています。

音声ファイルがないという方はフリーで使えるサイトで探してみましょう。
効果音ラボ
DOVA-SYNDROME

html側にaudio(音声ファイル)の指定

音声ファイルが準備できたら、htmlに使用するための定義をします。
audioタグで使うサウンドを指定しましょう。

※loop属性は「=””」の指定は不要です。
表示上自動で挿入されてしまうのですが許してください。。

play関数で再生

最後に再生してみましょう。
これはplay関数を使用します。

ちなみに添付しているサンプルアプリでは、
スライドバーが動くたびに音量(volume)を変更しています。

まとめ

まとめ

いかがでしたでしょうか。

アプリなどを作ろうとするとスライドバーによる操作はよく使うと思いますので
ぜひ参考にしていただければと思います。

今回紹介させていただいたアプリは以下のリンクから触ることができますので
興味があれば見ていってくれると嬉しいです。

Sound for Concentration

また、ソースコードについてもダウンロード可能なので
練習用にでも使ってみてください!
SoundForConcentration-master

最後までご覧いただきありがとうございました!

ここにタイトル

【jQuery】たった3行でハンバーガーパネルの実装
【jQuery】【タイマー処理】全力集中!ポモドーロタイマー
【javascript】【ゲーム】【タイマー処理】時間感覚王!!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です