首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在jquery中播放随机音频时运行函数?

问如何在jquery中播放随机音频时运行函数?
EN

Stack Overflow用户
提问于 2016-11-26 20:06:34
回答 1查看 407关注 0票数 1

(如果这看上去很明显,我是一个绝对的初学者,而且我被困住了,请耐心点吧。)

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

这个想法是:每次你点击脸部,它就会播放来自数组的随机声音,而且它也会产生动画。

问题是:目前它是这样做的,但是有两个独立的事件侦听器。鼠标移动/离开(我正在使用类交换查询中的文件),它可以点击播放。不太理想。

我如何解决它,使这两件事发生在同一事件?

我唯一的想法是交换到gif文件,只要声音播放,一旦它做了,它交换回png。这有可能吗?

谢谢你。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-26 23:14:17

这里有一个版本,它将所有这些绑定到单击处理程序,并检查音频是否停止使用onended播放,然后重新设置它的orginial类(您的png)。

​

代码语言:javascript
复制
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');

};
代码语言:javascript
复制
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);
}
代码语言:javascript
复制
<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数组中的文件。也可以采取其他措施,但这是另一个问题。:)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40822614

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档