做歌手的网站阿里云做网站经费

做歌手的网站,阿里云做网站经费,广告网站开发背景,外汇直播网站建设开发网页播放音乐这个常识应该都知道#xff0c;毕竟百度 MP3 搜索可是风靡一时#xff01;但使用浏览器无中生有的创建音频#xff0c;在 HTML5 规范落地之前可是一片空白。AudioContext 的体量与 Canvas 差不了多少#xff0c;一个针对图形图像#xff0c;一个用于音频…网页播放音乐这个常识应该都知道毕竟百度 MP3 搜索可是风靡一时但使用浏览器无中生有的创建音频在 HTML5 规范落地之前可是一片空白。AudioContext 的体量与 Canvas 差不了多少一个针对图形图像一个用于音频两者结合起来就把 flash 给拉下了神坛~~本文源之于一次技术研究曾经有一个需求要用 H5 搞一个网页 K 歌技术难点在于要将原唱、伴唱、录音的音频数据进行合并后来寻寻觅觅的找到了 AudioContext 这个 API虽然最终没用 H5 去实现不过还是涨了见识不废话直接看代码button idbutton经过我/buttonscriptwindow.AudioContext window.AudioContext || window.webkitAudioContext;(function () {if (!window.AudioContext) {alert(当前浏览器不支持Web Audio API);return;}// 按钮元素var eleButton document.getElementById(button);// 创建新的音频上下文接口var audioCtx new 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;// 鼠标hover我们的按钮的时候eleButton.addEventListener(mouseenter, function () {// 当前频率var frequency arrFrequency[start];// 如果到头改变音调的变化规则增减切换if (!frequency) {direction -1 * direction;start start 2 * direction;frequency arrFrequency[start];}// 改变索引下一次hover时候使用start start direction;// 创建一个OscillatorNode, 它表示一个周期性波形振荡基本上来说创造了一个音调var oscillator audioCtx.createOscillator();// 创建一个GainNode,它可以控制音频的总音量var gainNode audioCtx.createGain();// 把音量音调和终节点进行关联oscillator.connect(gainNode);// audioCtx.destination返回AudioDestinationNode对象表示当前audio context中所有节点的最终节点一般表示音频渲染设备gainNode.connect(audioCtx.destination);// 指定音调的类型其他还有square|triangle|sawtoothoscillator.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);// 1秒内声音慢慢降低是个不错的停止声音的方法gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime 1);// 1秒后完全停止声音oscillator.stop(audioCtx.currentTime 1);});})();/script以上代码内容来源于大佬张鑫旭的博客https://www.zhangxinxu.com/wordpress/2017/06/html5-web-audio-api-js-ux-voice/注意AudioContext 必须要在在用户有交互之后才能创建意思就是用户在网页上有点击操作之后才能开始播放音频。否则报错警告The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.效果预览可长按以下二维码跳转到大佬的体验地址{% asset_img qrcode.jpg %}二维码链接https://www.zhangxinxu.com/study/201706/button-hover-web-audio.html其他示例1、 oscillator.type 不同波形带来的声音效果https://codepen.io/gregh/pen/LxJEaj2、又有大佬使用 AudioContext 搞出了小时候玩的游戏音乐https://codepen.io/gregh/pen/xqWwqz写在最后AudioContext 的 API 绝不止用来创建音频这么简单往大了想一下Canvas 可以把 PS 搬到浏览器那些专业的音频处理软件是不是也可以搬到线上看看大佬对 AudioContext 的看法1