今日の人気記事

  1. 入力に応じてテキストエリアの高さを調節「Autosize」

クリックアクションに効果音を加える「Ion.Sound」

スポンサーリンク

クリックなどのアクションに効果音を加えるプラグイン「Ion.Sound」を紹介します。

jQueryプラグイン「Ion.Sound」

このプラグインを使えば、ボタンのクリックなどのユーザーアクションに効果音を加えることができます。

しかも、プラグインには25種の無料音源がついています。至れり尽くせりですね。

スポンサーリンク

デモでは、「効果音」というボタンが3つあります。クリックしてみてください。

「Ion.Sound」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ion.Sound - jQueryプラグインまとめのカルマ</title>
</head>
<body>
<h1>Ion.Soundのデモでーす。</h1>

<button id="sound1">効果音①</button>
<button id="sound2">効果音②</button>
<button id="sound3">効果音③</button>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="js/ion.sound.js"></script>
<script>
$(document).ready(function(){
  $.ionSound({
    sounds: [
      "water_droplet",
      "bell_ring",
      "metal_plate"
    ],
    path: "sounds/"
  });
  $("#sound1").on("click", function(){
    $.ionSound.play("water_droplet");
  });
  $("#sound2").on("click", function(){
    $.ionSound.play("bell_ring");
  });
  $("#sound3").on("click", function(){
    $.ionSound.play("metal_plate");
  });
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)