[JS]ボタンのクリック時にちょっと音をつけたい時に、イベントにサウンドを割り当てるスクリプト -Ion.Sound

ボタンをクリックした時に軽快な音をつけるなど、ページ上のさまざまなイベントにサウンドを割り当てることができるjQueryのプラグインを紹介します。

Ion.Sound

• Ion.Soundのデモ
• Ion.Soundの使い方

Ion.Soundのデモ

デモはデスクトップはChrome, Firefox, Opera, Safari, IE9+、スマフォの各ブラウザにも対応しています。

デモではあらかじめダウンロードファイルに含まれている15のサウンドをボタンクリックで楽しむことができます。

デモ（14/15）のキャプチャ

Ion.Soundの使い方

Step 1: 外部ファイル

</body>の上あたりにjquery.jsと当スクリプトを外部ファイルとして記述します。

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

Step 2: ファイルのアップロード

使用するサウンドファイルをサーバーにアップロードします。

my_cool_sound.mp3
my_cool_sound.ogg

すべてのブラウザが.mp3をサポートするわけではないので、.oggも用意します。
.oggがない場合は、Media.ioで.mp3を簡単に変換できます。

Step 3: JavaScript

最初にスクリプトを初期化します。

ion.sound.init();

サウンドを鳴らす時は、下記のように呼び出します。

ion.sound.play("my_cool_sound");

オプションでサウンドのパス、ボリューム、自動再生などを設定できます。

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");
});