Nedd通過單擊HTML5模板中的一個按鈕播放音頻剪輯和圖像動畫

Question

我在我的HTML5模板中有播放按鈕。當我點擊「播放」按鈕時，將圖像從左向右移動。

現在我想通過點擊相同的按鈕播放音頻剪輯。這意味着我想說 - 當我點擊播放按鈕時，圖像將會移動，音頻剪輯將同時播放。

播放按鈕的類別是「.move_image」

Answer 1

你可以嘗試這樣的事：

function moveImage() { 
    // Code to move image 
    play(); 
} 

function play() { 
    var audio = $('#audio'); 
    audio.play(); 
} 

<input type="button" value="PLAY" class=".move_image" onclick="moveImage()"> 
<audio id="audio" src="URL to audio file here" ></audio> 

當畫布上引入音頻我已經使用這個庫：http://www.createjs.com/#!/SoundJS SoundJS是CreateJS的一部分庫，適用於像補間一樣的Flash，預加載圖像和聲音並播放聲音。

Answer 2

您可以編寫函數像

$('.move_image').on('click',function(){ 
    document.getElementById('audio').play();//To Play The Audio 
    $('#image1').animate({ 
     opacity: 0.25, 
     left: "+=50", 
     height: "toggle" 
    }, 2000, function() { 
     //Bring Back to original Stage 
     $('#image1').animate({ 
      opacity: 1, 
      left: "-=50", 
      height: "toggle" 
     }, 2000); 
    }); 
}); 

你可以參考JSFiddle。對於圖像動畫，您可以使用.slide或.animate（）jQuery函數。