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

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

采用的文章的地址：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;//当前时间音量设置为0gainNode.gain.setValueAtTime(0, audioCtx.currentTime);//0.01秒后音量为1gainNode.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);
};

记一次做九宫格抽奖转动音效嘟嘟嘟相关推荐

python 还原九宫格图片_用Python做一个好玩的朋友圈九宫格抽奖
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 设计思路以朋友圈中看到的1号图做参考,我们需要准备 300*900 的白色底图,搞笑表情图,广告语,中间一个醒目的数字编号,外加下方的嘲讽&qu ...
用Python做一个好玩的朋友圈九宫格抽奖
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 哈哈,笑出猪叫!这个玩法利用了朋友圈发长图会显示中间局部的设定,搞笑之余也为朋友圈广告营销贡献了新思路. 制作图的过程也不复杂,长图对应部分设计好 ...
python社团宣传语_用Python做一个好玩的朋友圈九宫格抽奖
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 设计思路以朋友圈中看到的1号图做参考,我们需要准备 300*900 的白色底图,搞笑表情图,广告语,中间一个醒目的数字编号,外加下方的嘲讽&qu ...
JS + CSS 做一个简易九宫格抽奖
目录 1.CSS样式 2.JS动作大概做出来就是这个样子,alert的弹窗样式我也没改,就默认的. 1.CSS样式样式大概分以下方面: 创建外框及内框样式: 8个奖品小方格和中间按钮小方格: 奖品 ...
基于Canvas的九宫格抽奖，就是仿csdn的APP做的，能过审不？
引言: 九宫格抽奖一直就挺火爆,手机端也经常用,这不来了兴趣写了一波,看着效果还不错,拿出来大家唠唠! 效果: 实现思路绘制出背景大图,两张图片,一张稍微小,并且稍小的图片颜色更深一些: 绘制8张白 ...
基于React跑一个简易版九宫格抽奖
写在前面,年会将至,需求自然也跟各种抽奖有关啦.最近刚好接了一个紧急的九宫格抽奖需求,顺便也记录一下撸这个简易九宫格的过程吧. 本文可能涉及以下内容: 九宫格布局九宫格动效抽奖逻辑处理前后端联调 ...
女友的生日礼物能随便嘛？Python小妙招：制作一款出圈九宫格抽奖小程序。
导语上一期文章是写的九宫格切图,都说很好看~朋友圈的九宫格也大受欢迎! 其实吧:最近女朋友要生日了,我问她要什么吧,她就说"随便",我这一想,顿时恼火啊,说随便,但是当男朋友的也 ...
html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
Android打造流畅九宫格抽奖
因为company项目中需要做九宫格抽奖活动,以前都没有做过类似的功能,虽然之前在浏览大神们的博客中,无意中也看到了好多关于抽奖的项目,但因为项目中没有需要,一直都没有点击进去看.这次不去看估计不行. ...

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

记一次做九宫格抽奖转动音效嘟嘟嘟相关推荐

最新文章

热门文章