Question

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

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

这个想法：每次你点击脸部，它会从阵列中播放随机声音，并且它也会动画。

问题：目前它确实如此，但有2个独立的事件监听器。鼠标悬停/离开时动画（我使用类在查询中交换文件）并在点击时播放。不理想。

如何修复它以便同一事件发生两件事？

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

谢谢yoooou。

Answer 1

这是一个版本，它将所有这些绑定到点击处理程序，并检查音频是否/何时停止使用onended播放，然后将脸部重置为其原始的css-class（您的png）。

＆＃13;

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

在JSFiddle上查看/编辑

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

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

如何在jquery中随机播放音频时如何运行功能？

1 个答案:

在JSFiddle上查看/编辑