记一次做九宫格抽奖转动音效嘟嘟嘟

记一次做九宫格抽奖转动音效嘟嘟嘟

采用的文章的地址:https://blog.csdn.net/qq_39759115/article/details/78604912

当我知道要做一个九宫格抽奖的时候,心里很崩溃,正值毕业季,毕设都忙不过来,于是我翻了很多抽奖的博客,最终找到了这一篇,现在我完成了,可是我不知道我当时是翻的哪位小姐姐小哥哥的博客了,就没有引用链接。
这是界面,概率什么的都加上去了,准备交差,结果要做一个嘟嘟嘟的音效,就像lh机抽奖的音效,每转一个格子就响一声音效。然后我找到了这段代码,代码如下
在这里插入图片描述

<div id="div_play1" style='display: none'></div>
<div id="div_play2" style='display: none'></div>

<script type="text/javascript">
function play()
{
	var url = "Msg.mp3";
	var div = document.getElementById('div_play1');
	div.innerHTML = '<embed src="'+url+'" loop="1" autostart="true" hidden="true"></embed>';
	var emb = document.getElementsByTagName('EMBED')[0];
	if (emb) {
		div = document.getElementById('div_play2');
		div.innerHTML = 'loading: '+emb.src;
		setTimeout(function(){div.innerHTML='';},1000);
	}
}
</script>

把play()方法到 点击事件里面,结果只实现了,点击抽奖响起一段音效,不能让音效跟随格子的转动而嘟嘟嘟的响。而且就算可以伴随格子的转动响,全程都是一种声音太单调了,于是我大脑搜索关键字,继续寻找方法。
找到一篇博客,关于OscillatorNode的,调用系统里面的音效创建一个周期性波形震荡,加进去后就实现了转动一个格子,响一声,而且还会每个音调都不一样,音调上坡,然后音调下坡。

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();//实例化AudioContext对象
// 发出的声音频率数据,表现为音调的高低
var arrFrequency = [196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99, 880.00, 987.77, 1046.50];
 // 音调依次递增或者递减处理需要的参数
var start = 0, direction = 1;
function test() {
	//当前频率
    var frequency = arrFrequency[start];
	//如果到头,改变音调的变化规则
    if (!frequency) {
        direction = -1 * direction;
        start = start + 2 * direction;
        frequency = arrFrequency[start];
    }
	//改变索引
    start = start + direction;
	//创建一个oscillator,它表示一个周期性波形震荡,基本上来说创造了一个音调
    var oscillator = audioCtx.createOscillator();
	//创建一个gainNode,控制音频的总音量
    var gainNode = audioCtx.createGain();
	//把音量,音调和终结点进行关联
    oscillator.connect(gainNode);
	//audioCtx.destination返回audioDestinationNode对象,表示当前audio context中所有节点的最终节点,表示音频渲染设备
    gainNode.connect(audioCtx.destination);
	//指定音调的类型
    oscillator.type = 'sine';
	//设置当前播放声音的频率,也就是最终播放声音的调调
    oscillator.frequency.value = frequency;
	//当前时间音量设置为0
    gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
	//0.01秒后音量为1
    gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
	//音调从当前时间开始播放
    oscillator.start(audioCtx.currentTime);
	//一秒内声音慢慢降低
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
	//1秒后声音完全停止
    oscillator.stop(audioCtx.currentTime + 1);
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值