JavaScriptで簡単な音声視覚エフェクトを作成

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

実務で音声の再生・停止を行う UI を実装するのに伴い、簡単な音声視覚エフェクトも合わせて実装したので、簡単にまとめて汎用化してみました。

デモ

リポジトリ

公開しています。

https://github.com/sugarshin/sounder.js

なお、当記事の解説は v0.6.2 時のものです。

使い方

<head> 内か </body> の直前で当 JavaScript ファイルを読み込みます。

<script src="sounder.js"></script>

Sounder コンストラクタ関数を使用します。

以下のようにインスタンスを作成し、.create() メソッドに出力先の DOMElement を渡して実行します。

var sounder = new Sounder(),
    output = document.getElementById('output');

sounder.create(output);

いくつかオプションを渡せます。

var sounder = new Sounder({
  size: [20, 4],
  color: '#e67e22',
  column: 6,
  maxHeight: 10,
  autoPlay: true,
  speed: 60
});

option.size

エフェクトするピース 1 つのサイズです。配列で、 [横, 縦] のように指定します。

単位は px です。

デフォルトでは [20, 4] となっています。

option.color

色を指定します。 CSS で指定可能な値を文字列で指定します。

デフォルトでは '#e74c3c' となっています。

option.column

エフェクトの横列数を指定します。

デフォルトでは 6 となっています。

option.maxHeight

エフェクトする最大の高さ(縦に伸びる最大値)を指定します。

デフォルトでは 10 となっています。

option.autoPlay

実行時にオートプレイさせるか指定します。

デフォルトでは false となっています。

option.speed

エフェクトさせるスピードをミリセカンドで指定します。

デフォルトでは 60 となっています。


メソッド

制御のメソッドもいくつか用意してあります。

.play( [callback] )

エフェクトを再生します。 引数にコールバック関数を渡せます。

.pause( [callback] )

エフェクトを一時停止します。 引数にコールバック関数を渡せます。

.toggle( [callback] )

再生・一時停止の切り替えをします。 引数にコールバック関数を渡せます。

.reset()

エフェクトをリセット(カウンター 1)にします。


つみき色

少し遊びを加えてみました。

弊社ロゴの色を指定できるようにしてあります。

var sounder = new Sounder({
  color: 'tsumiki'
});

10 色からランダムで選択されます。

制御メソッドを使い、ボタンなども加えてみた例です。

当ライブラリのライセンスは MIT となっています。また、モダンブラウザと IE8 以上をサポート対象としています。

jQueryメソッド

jQuery のメソッドとして使用したい場合は、コードの冒頭で以下のように記述します。

$.fn.sounder = function(options) {
  return this.each(function(i, el) {
    var sounder = new Sounder(options);
    sounder.create(el);
    $(el).data('sounder', sounder);
  });
};

これで $('#output').sounder(); のようにして使用することができます。

処理の内容は、

  • インスタンスを作成
  • .create() を実行
  • 対象の jQuery オブジェクトの data 属性の 'sounder' プロパティに、インスタンスを格納

という流れです。

例として、前述のつみき色のデモを jQuery で記述すると以下のようになります。

$(function() {
  var sounder = $('#output').sounder({
    size: [16, 4],
    color: 'tsumiki',
    column: 11,
    maxHeight: 10,
    autoPlay: true,
    speed: 50
  }).data('sounder');

  $('#play').on('click', function() {
    sounder.play();
  });

  $('#pause').on('click', function() {
    sounder.pause();
  });

  $('#toggle').on('click', function() {
    sounder.toggle();
  });

  $('#reset').on('click', function() {
    sounder.reset();
  });
});

まとめ

一度書いたコードはこのようにまとめておくと、後々重宝しますね。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ