在音频播放上移动图像答案

【问题标题】：Move Image on Audio Play在音频播放上移动图像
【发布时间】：2015-07-24 15:33:34
【问题描述】：

这里的Javascript问题：当用户按下音频上的播放按钮时，有没有办法让图片移动或真正触发任何其他事件。

.hero {
	width: 600px;
	height: 600px;
}
.home.hero {
	background-image: url(http://i2.cdn.turner.com/cnnnext/dam/assets/111017060721-giant-panda-bamboo-story-top.jpg);
	background-size: cover;


}

	<a class="scroll" id="home"></a>
	<div class="home hero">
	<script>

  $(".home").animate({"top": "+=50px"}, 400);

     </script>
			<!--audio-->
			<!--set Volume -->
	<script type="text/javascript">
    function setVolume()
    {
        mySound=document.getElementById("sound");
        mySound.volume=0.5;
    }
    window.onload=setVolume;
    </script>
            <!--Volume end-->
		<div class="audio">
	    <audio id ="sound" controls>
        
        <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg" volume="0.5">
             Your browser does not support the audio element.
        </audio>
            
        <!--audio end-->
</div>

我希望图片向下移动一小段距离，当它到达底部时，回到顶部并在播放音频时继续这样做。知道怎么做吗？

【问题讨论】：

我尝试过以下变体：和
您是否包含 jQuery 库？它不包含在 jsfiddle 或您帖子的代码中。
我有
这里有一个线索。 move = 家。 home = 锚标记。为什么你有move.onplaying？锚标签不播放音频，因此尝试附加 onplaying 的事件侦听器不会触发...我相信您要侦听的事件是 onplay=function(){//event code}; 或 addEventListener("play", function(){//event code}); 但您需要附加到音频标签，而不是锚标签。（与评论“我尝试过：”的变体有关）
我更改了我的代码，但我仍然无法让它工作，我想看看我的函数是否工作，所以在那里插入了一个警报，但它从来没有调用两个警报，不知道如何修复它：jsfiddle.net/Lc7ccjf6/3

标签： javascript html animation audio

【解决方案1】：

就个人而言，我更喜欢“播放”事件而不是“播放”（this SO 答案给出了它们之间的区别），在你的小提琴演示中，我没有找到 JQuery 库，所以添加了它并清理了代码位，更新代码：

$(function(){

    var aud = $("#sound"),            
        move=$(".home");      

    move.animate({"top": "+=50px"}, 400);                        
    aud.on('play',function() { 
        move.animate({height:"300px"}, 400); 
    });
    aud.on('pause',function() { 
        if(aud[0].paused && (aud[0].currentTime === 0 || aud[0].currentTime === aud[0].duration) ) // checking if audio is finished, not just paused in between
            move.animate({height:"600px"}, 400);
    });
});

updated fiddle demo

【讨论】：