单击HTML5模板中的一个按钮，即可播放音频剪辑和图像动画

Question

I've a play button in my HTML5 template. When I click the 'play' button then move an image left to right.

Now I want to play an audio clip by click on the same button. That means I want to say- when I'll click the play button then the image will move and the audio clip will play at the same time.

the play button's class is ".move_image"

Answer 1

You can write function like

$('.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);
    });
});

You can refer to JSFiddle . For Image Animation you can use .slide or .animate() jQuery functions.

Answer 2

You could try something like this:

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>

When introducing audio on Canvas I have used this library: http://www.createjs.com/#!/SoundJS SoundJS is part of the CreateJS library, works well for Flash like tweens, preloading images and sound and playing sounds.