html5调整音频音高
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调整音频音高的更多相关文章
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- css总结16:HTML5 多媒体音频(Audio)视频(video )
1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...
- HTML5: HTML5 Audio(音频)
ylbtech-HTML5: HTML5 Audio(音频) 1.返回顶部 1. HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频 直到现在,仍然不存在一项旨在网 ...
- HTML5实现音频播放
Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 aud ...
- HTML5视音频小结
目前,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件.HTML5 规定了一种通过 video 元素来包含视频的标准方法.当前HTML5只支持三种格式的视频. 格 ...
- HTML5 总结-音频-2
HTML5 音频 音频格式 当前,audio 元素支持三种音频格式: IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis ...
- html5之音频、视频(video&audio)
音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
- HTML5视音频标签参考
本文将介绍HTML5中的视音频标签和对应的DOM对象.是相关资料的中文化版本,可以作为编写相关应用的简易中文参考手册. 一些约定 所有浏览器:指支持HTML5的常见桌面浏览器,包括IE9+.Firef ...
- HTML5的音频播放和视频播放
1.音频播放 audio(音频) html5提供了播放音频文件的标准 <audio src="anli.mp3" controls="controls" ...
随机推荐
- (一)AppScan的安装及破解
IBM AppScan是一款目前最好用的Web 应用安全测试工具,Rational AppScan 可自动化 Web 应用的安全漏洞评估工作,能扫描和检测所有常见的 Web 应用安全漏洞,例如 SQL ...
- AJAX学习笔记——跨域
跨域 一个域名地址的组成 http:// www abc.com : 8080 / scripts/jquery.js 协议 子域名 主域名 端口号 请求资源地址 端口号:一般来说域名端口号是80,如 ...
- 10 loader - 配置处理less文件的loader
第一步:装包 cnpm i less-loader -D 安装完提示警告 peerDependencies WARNING less-loader@* requires a peer of less@ ...
- WebStorm 简单搭建NodeJs服务
开始使用 WebStorm 搭建( WebStorm 请自行安装...... ) 在 项目 根目录 新建个 app.js 开始 编写 app,js // 引入 HTTP 模块 const http = ...
- linux查看系统启动时间
1.uptime命令 felix@felix-computer:~$ uptime :: up :, user, load average: 0.89, 0.74, 1.00 felix@felix- ...
- python中如何给散点图上面的特定点做标记
今天想在散点图的某些特定的点外面画圆圈标记,从下面的文章找到一些灵感,只要在原来的散点图上面给指点添加相应的标志,设置其透明度就可以实现该想法. 顺便复习下散点图的用法. 大家平时为了直观地显示数据的 ...
- jquery入门使用
目录 jquery入门使用 1.jQuery简介 jQuery介绍 jQuery优点 2.jQuery的load方法 load方法介绍 load实例 代码 3.jQuery的get方法 get()方法 ...
- 前端逼死强迫症之DOM
Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签 ...
- python 使用PyKDL 四元数转欧拉角
安装: sudo apt-get install ros-indigo-kdl-parser-py 使用: import PyKDLimport math def quat_to_angle(quat ...
- CPU占用高系统反应慢之问题定位
今天在看到公司群里有关于测试反应测试服务器比较卡,调用调用超时,响应很慢,成功率低的问题,然后想着去处理这个问题. 本着开发的精神,摒弃网管的水平,寻找问题的根源. 主要从如下几个方面入手: 1:查询 ...