「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。 目次 †概要 †詳細 †効果音 †jQuery Plugin - Ion.Sound †
HTML5のaudio要素とAPI †HTML5のaudio要素とJavaScript APIで制御する。 <script> var audio = document.getElementById("audio"); // audioの取得 audio.play(); // mp3の再生 </script> <body> <audio id="audio"> <source src="xxxxx.mp3" preload="auto"> </audio> </body>
アニメーション †jQuery - Effects の .animate()メソッドを使用。 †.animate() メソッドで実装可能。 以下は、ボタン押下時のアニメーション+効果音。 $(function() { var audio = document.getElementById("audio"); // audioの取得 $('.imgbutton').on('click', function() { audio.play(); // mp3の再生 $(this).animate( { width: '100px', // 小さくしたときのサイズ(幅) height: '110px' // 小さくしたときのサイズ(高さ) }, { duration: 50, // 小さくするときにかかる時間(ms) complete: function() { $(this).animate( { width: '175px', // 大きくしたときのサイズ(幅) height: '220px' // 大きくしたときのサイズ(高さ) }, { duration: 100, // 大きくしたときかかる時間(ms) complete: function() { $(this).animate( { width: '150px', // 元のサイズ(幅) height: '165px' // 元のサイズ(高さ) }, { duration: 100 // 元のサイズに戻るときにかかる時間(ms) }); } }); } }); }); });
HTML5のcanvas要素とAPI †
|