var audioSrc = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1715/the_xx_-_intro.mp3';

function bufferSound(ctx, url) {
var p = new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.responseType = 'arraybuffer';
req.onload = function() {
ctx.decodeAudioData(req.response, resolve, reject);
}
req.send();
});
return p;
} var audioContext = new AudioContext();
bufferSound(audioContext, audioSrc).then(function (buffer) {
var g = audioContext.createGain();
g.gain.value = 5;
g.connect(audioContext.destination); var bq = audioContext.createBiquadFilter();
// found out about detune here: http://chimera.labs.oreilly.com/books/1234000001552/ch04.html
bq.detune.value = 1200;
bq.connect(g); var src = audioContext.createBufferSource();
src.buffer = buffer;
src.connect(bq); src.start();
});
<label for="pitchIn">Set pitch</label>
<input type="number" min="-1200" max="1200" step="200" value="0" id="pitchIn">

其他参考:https://stackoverflow.com/questions/53876757/how-to-change-the-pitch-with-javascript

html5调整音频音高的更多相关文章

  1. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  2. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

  3. HTML5: HTML5 Audio(音频)

    ylbtech-HTML5: HTML5 Audio(音频) 1.返回顶部 1. HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频 直到现在,仍然不存在一项旨在网 ...

  4. HTML5实现音频播放

    Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 aud ...

  5. HTML5视音频小结

    目前,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件.HTML5 规定了一种通过 video 元素来包含视频的标准方法.当前HTML5只支持三种格式的视频. 格 ...

  6. HTML5 总结-音频-2

    HTML5 音频 音频格式 当前,audio 元素支持三种音频格式:   IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   ...

  7. html5之音频、视频(video&audio)

    音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...

  8. HTML5视音频标签参考

    本文将介绍HTML5中的视音频标签和对应的DOM对象.是相关资料的中文化版本,可以作为编写相关应用的简易中文参考手册. 一些约定 所有浏览器:指支持HTML5的常见桌面浏览器,包括IE9+.Firef ...

  9. HTML5的音频播放和视频播放

    1.音频播放 audio(音频) html5提供了播放音频文件的标准   <audio src="anli.mp3" controls="controls" ...

随机推荐

  1. 本地python环境检查,插件检查及插件安装

    电脑windows键+r  输入cmd 在python命令模式下 pip list  --可以查看已安装的插件情况 或者用 pip freeze 也可以 卸载插件:pip uninstall *** ...

  2. ASP.NET 下配置请求大小、请求时间等参数

    在邮件发送系统或者其他一些传送文件的网站中,用户传送文件的大小是有限制的,因为这样不但可以节省服务器的空间,还可以提高传送文件的速度.下面介绍如何在Web.Config文件中配置限制上传文件大小与时间 ...

  3. js对iframe内外(父子)页面进行操作

    dom对象推荐阅读 怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是conten ...

  4. Vue之nextTick()

    我们有时候操作 DOM,是想在 data 数据变更的时候进行操作. 那么,我们应该怎么做呢? index.html <!DOCTYPE html> <html lang=" ...

  5. qsort中的函数指针,及函数解释

    函数指针有何用 函数指针的应用场景比较多,以库函数qsort排序函数为例,它的原型如下: void qsort(void *base,size_t nmemb,size_t size , int(*c ...

  6. BZOJ2616 SPOJ PERIODNI(笛卡尔树 + DP)

    题意 N,K≤500,h[i]≤106N,K\le 500,h[i]\le10^6N,K≤500,h[i]≤106 题解 建立出小根堆性质的笛卡尔树,于是每个节点可以代表一个矩形,其宽度为子树大小,高 ...

  7. google Guava包的reflection(反射)解析

    译者:万天慧(武祖) 由于类型擦除,你不能够在运行时传递泛型类对象——你可能想强制转换它们,并假装这些对象是有泛型的,但实际上它们没有. 举个例子: ArrayList<String> s ...

  8. 43、扩展原理-@EventListener与SmartInitializingSingleton

    43.扩展原理-@EventListener与SmartInitializingSingleton 还可以使用 @EventListener; 来监听事件 原理:使用EventListenerMeth ...

  9. [luogu] zpl的数学题1

    https://www.luogu.org/problemnew/show/U16887 $f[1] + f[2] + f[3] + .... + f[n] = f[n + 2] - 1$ 矩阵快速幂 ...

  10. 「CF235E」Number Challenge「莫比乌斯反演」

    一个结论:(从二维扩展来的,三维也是对的,证明可以考虑质因数分解) \[ d(ijk)=\sum_{i'|i}\sum_{j'|j}\sum_{k'|k}[\gcd(i',j')=1][\gcd(i' ...