ボタンクリックでクリック音などを鳴らせるjQueryプラグイン「Ion.Sound」

「Ion.Sound」はclickやhoverなど、イベント発生時に音を鳴らすことのできるjQueryプラグインです。用意されている音は15種類あり、クリック音だけで4種類ほど用意されています。

Ion.Sound

ionSound

クロスブラウザ対応がされており、Chrome、Firefox、Opera、Safari、IEは9以上をサポートしています。どのイベントで音を鳴らすかはJS制御なので、多用な使い方が可能です。

個人的には”Button Tiny”がたまらないです。ぜひリンク先から聞いてみてください。

 

それでは「Ion.Sound」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/ion-sound/ion.sound.min.js"></script>

 

HTMLはこのようにマークアップしました。ボタンを一つだけ設置。

<input type="button" id="myButton" value="push">

 

JavaScriptはこのように実装します。まずはinitで、呼び出す音をセットしましょう。今回は全てセットしました。また音量や、音声ファイルのパスもここで指定します。その後、ボタンへクリックイベントを与え、button_tiny音を鳴らすよう実装しています。

ion.sound.init({
  sounds: [                       // set sounds names
      "beer_can_opening",
      "bell_ring",
      "branch_break",
      "button_click",
      "button_click_on",
      "button_push",
      "button_tiny",
      "camera_flashing",
      "computer_error",
      "door_bell",
      "light_bulb_breaking",
      "metal_plate",
      "pop_cork",
      "staple_gun",
      "water_droplet"
  ],
  path: "sounds/",                // set path to sounds
  multiPlay: false,               // playing only 1 sound at once
  volume: "0.3"                   // not so loud please
});

$("#myButton").on("click", function(){
  ion.sound.play("button_tiny");
});

 

これで完成。とっても簡単です。こういった音をうまく組み込むと面白みのあるサイトに仕上がりそうですね。参考にどうぞ。

 

Home > JavaScript > ボタンクリックでクリック音などを鳴らせるjQueryプラグイン「Ion.Sound」

Return to page top