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

本記事はこんな人向け

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

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

SoundForConcentration-master

この記事を読むと

スライドバーの実装ができる
音声再生の方法がわかる

1 Sound for Concentrationとは
2 作成時のポイント
3 まとめ

Sound for Concentrationとは

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

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

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

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

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

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

作成時のポイント

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

Bootstrapの準備

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

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

  <!-- Bootstrap 導入部分ここから -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

   	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <!-- Bootstrap 導入部分ここまで -->

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

スライドバーの実装

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

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

<input type="range" class="custom-range" id="customRange1" value="0" />

1	<input type="range" class="custom-range" id="customRange1" value="0" />

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

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

  $(function () {
    for (let i = 1; i &lt;= 8; i++) {
      $('#vol' + i).html($('#customRange' + i).val());

      $('#customRange' + i).on('input change', function () {
        // 変動
        $('#vol' + i).html($(this).val());
      });
    }
  });

$(function () {

for (let i = 1; i <= 8; i++) {

$('#vol' + i).html($('#customRange' + i).val());

$('#customRange' + i).on('input change', function () {

// 変動

$('#vol' + i).html($(this).val());

});

}

});

音声の再生

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

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

再生用ファイルの準備

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

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

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

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

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

  <audio id="sound1" preload="auto" loop="loop">
    <source src="./sound/rain2.mp3" type="audio/mp3" />
  </audio>

</audio>

play関数で再生

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

audio['audio' + i].play();

1	audio['audio' + i].play();

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

  $(function () {

    $('#customRange' + i).on('input change', function () {
      // 変動
      audio['audio' + i].volume = parseInt($('#vol' + i).text()) / 100;
    });
  });

$(function () {

$('#customRange' + i).on('input change', function () {

// 変動

audio['audio' + i].volume = parseInt($('#vol' + i).text()) / 100;

});

まとめ

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

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

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

Sound for Concentration

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

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

ここにタイトル

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

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

目次

Sound for Concentrationとは

作成時のポイント

Bootstrapの準備

スライドバーの実装

音声の再生

再生用ファイルの準備

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

play関数で再生

まとめ

コメントを残すコメントをキャンセル

カテゴリー

最近の投稿

目次

Sound for Concentrationとは

作成時のポイント

Bootstrapの準備

スライドバーの実装

音声の再生

再生用ファイルの準備

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

play関数で再生

まとめ

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

【javascript】id/class名をキーにclassを動的に追加…

【jQuery】ツイッター投稿用のリンク作成方法

【jQuery】【scroll】【scrolltop】スクロールイベント…

【jQuery】前向きになれる名言をあなたに

【作業効率化】作業スピードがあがるタスク管理方法

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

【DB Browser for SQLite】データベースの新規作成方法…

【Table of Contents Plus】目次が二重に表示される場…

カテゴリー

最近の投稿

コメントを残すコメントをキャンセル