SaaS開発で調べたJavaScriptについてのメモ。
HTML5 Audio オブジェクトを JavaScript で制御する。
<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() のチェーンで実装可能。
以下は、ボタン押下時のアニメーション+効果音。
$(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) }); } }); } }); }); });