javascript - 在 jquery 中随机播放音频时如何运行函数？

Question

(如果它看起来非常明显，请耐心等待，我是一个绝对的初学者，我被卡住了。)

我建立了这个:https://github.com/aplustardcrocodile/aplustardcrocodile.github.io

这个想法:每次你点击脸部时，它都会从数组中播放一个随机声音，它也会动画。

问题:目前它可以做到这一点，但有 2 个独立的事件监听器。鼠标悬停/离开时的动画(我正在使用类在查询中交换文件)并在点击时播放。不理想。

我该如何解决它，以便同一事件发生这两件事？

我唯一的想法是只要声音正在播放就切换到gif文件，一旦完成它就会切换回png。那可能吗？

谢谢你。

Answer 1

这是一个将所有这些绑定(bind)到点击处理程序的版本，并且还使用 onended 检查音频是否/何时停止播放。然后将面部重置为其原始 css 类(您的 png)。

var audioFiles = [
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/01.m4a',
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/02.m4a',
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/03.m4a',
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/04.m4a',
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/05.m4a',
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/06.m4a',
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/07.m4a',
	'https://cdn.rawgit.com/aplustardcrocodile/aplustardcrocodile.github.io/master/assets/sounds/08.m4a',
];

var face = $('#face'),
	audio = $('#audio')[0],
	isPlaying = false;

face.on('click', function(){
	
	if( !isPlaying ){
		isPlaying = true;

		// toggle class to change image
		$(this).toggleClass('active');

		// get random from audioFiles
		var currentAudio = audioFiles[Math.floor(Math.random() * audioFiles.length)];

		// set new random audio as src
		audio.src = currentAudio;

		// ..then play it
		audio.currentTime = 0; // 0 always make sure its reset
		audio.play();
	}
})

// check when audio is complete
audio.onended = function(){

	// reset isPlaying
	isPlaying = false;
	
	// remove active-class from face
	face.removeClass('active');

};

body { padding: 1%; background: aliceblue; width: 472px; margin: 0 auto; position: relative; }
#face {
	background: url('https://aplustardcrocodile.github.io/assets/images/Face.png') no-repeat;
	width: 472px; height: 665px;
	cursor: pointer;
	transition: transform .5s ease;
}

#face:hover { opacity: .9; }


#face.active {
	opacity:1;
	background: url('https://aplustardcrocodile.github.io/assets/images/Face-loop.gif') no-repeat;
	transform: rotateZ(5deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- face container -->
<div id="face"></div>

<!-- audio element -->
<audio id="audio"></audio>

在 JSFiddle 上查看/编辑

https://jsfiddle.net/tommiehansen/svkeebgy/4/

请注意，如果用户没有缓存，则在加载下一个声音时会有延迟。一个解决方案是简单地预加载所有音频文件内联，然后选择其中一个来播放，而不是使用 js 数组中的文件。也可以采取其他措施，但这是另一个问题。 :)