我通过websockets接收原始float32音频,并希望在浏览器中播放.根据我的理解,我需要使用MediaStream API.但是,我找不到一种方法来创建一个可以附加数据缓冲区的MediaStream.
实现这个目标的正确方法是什么？
我正在尝试这样的事情:
var context = new AudioContext();
context.sampleRate = 48000;
var stream = null; // ????
var source = context.createMediaStreamSource(stream);
source.connect(context.destination);
source.start(0);
socket.onmessage = function (event) {
stream.appendBuffer(new Float32Array(event.data)); // ????
};
昨天,我对AudioContext对象的noteOn方法有疑问.我现在已经在这个AudioContext对象上转过身了.以下是我在桌面上的Safari中尝试过的以及相关的错误消息:
var ctx
// ctx = new(AudioContext || webkitAudioContext); // ReferenceError: Can't find variable: AudioContext
// ctx = new(audioContext || webkitAudioContext); // ReferenceError: Can't find variable: audioContext
// ctx = new(window.AudioContext || webkitAudioContext); // ReferenceError: Can't find variable: webkitAudioContext
ctx = new(window.AudioContext || window.webkitAudioContext);
// TypeError: 'undefined' is not a constructor (evaluating 'new(window.AudioContext || window.webkitAudioContext)')问:如何定义myAudioContext使其适用于所有浏览器？
我想在iPhone上进行现场声音分析.因此我使用webkitAudioContext Analyzer.
var ctx = new (window.AudioContext || window.webkitAudioContext);
var audioGoodmorning = new Audio('assets/sounds/greeting.m4a');
var audioSrc = ctx.createMediaElementSource(audioGoodmorning);
var analyser = ctx.createAnalyser();
analyser.fftSize = 32;
audioSrc.connect(analyser);
audioSrc.connect(ctx.destination);
var frequencyData = new Uint8Array(analyser.fftSize);
analyser.getByteFrequencyData(frequencyData);
这适用于Mac上的Chrome.当将网站添加到主屏幕时,它也适用于Safari
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="CHAR">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
如果没有将网站添加到主屏幕,它在Safari上不起作用.使用嵌入iOS wkwebview的网站时,它不起作用.这就是我想要实现的目标.不工作时,frequencyData数组充满零.
有没有经历过这种问题的人？
提前致谢
在iOS 6下的HTML5中使用webkitAudioContext时,我一直在努力解决难以捉摸的音频失真问题.在其他情况下可能会发生这种情况,但我可以获得100%repro的唯一方法是在重启设备后第一次访问我的页面.看起来如果您在访问此页面之前访问任何具有音频功能的页面,则不会出现问题.
失真仅发生在webkitAudioContext.decodeAudioData()生成的音频上,然后通过webkitAudioContext.createBufferSource()播放.webkitAudioContext.createMediaElementSource()的音频播放不会扭曲.
我错过了一些初始化步骤吗？以下是我作为错误报告提交给Apple的完整代码和HTML(但未收到回复):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var buffer = null;
var context = null;
var voice = null;
function load_music(file) {
context = new webkitAudioContext();
voice = context.createBufferSource();
var request = new XMLHttpRequest();
request.onload = function() {
context.decodeAudioData(request.response, function(result) {
buffer = result;
document.getElementById("start").value = "Start";
});
};
var base = window.location.pathname;
base = base.substring(0, base.lastIndexOf("/") + 1);
request.open("GET", base + file, true);
request.responseType = "arraybuffer";
request.send(null);
}
function start_music() {
if (!buffer) { …我正在尝试对从audioContext获取的采样率进行下采样.我相信它是在44100,我希望它是11025.我想我可以平均每3个样本,它以正确的速率播放,但是音高太高,好像我们都在氦气.
在11025样本中将float32Array从44100下采样到int16Array的正确方法是什么？
var context = new Flash.audioContext();
var audioInput = context.createMediaStreamSource(stream);
var recorder = context.createScriptProcessor(null, 1, 1);
recorder.onaudioprocess = onAudio;
audioInput.connect(recorder);
recorder.connect(context.destination);
var onAudio = function (e) {
var left = e.inputBuffer.getChannelData(0);
bStream.write(Flash.convertFloat32ToInt16(left));
}
var convertFloat32ToInt16 = function(buffer) {
var l = buffer.length;
var point = Math.floor(l/3);
var buf = new Int16Array(point);
for (var x = l; x > 0;) {
var average = (buffer[x] + buffer[x-1] + buffer[x-2]) / 3;
buf[point] = average*0x7FFF;
point -= 1;
x -= 3; …我正在尝试在Angular 5应用的打字稿文件中使用AudioContext。它在Chrome上运行良好，在Safari上不运行。我通过谷歌搜索看到的所有内容都说可以使用，window.webkitAudioContext但是当打字稿编译器运行时说它在Window类型上不存在时，它立即崩溃。
let context = new AudioContext();
let source = context.createBufferSource();
context
.decodeAudioData(event.body)
.then(x => {
source.buffer = x;
source.connect(context.destination);
source.start(0);
});
有没有办法记录发送到的音频数据webkitAudioContext.destination？
节点正在那里发送的数据正由浏览器播放,因此应该有一些方法将该数据存储到(.wav)文件中.
audio-recording html5-audio webkitaudiocontext web-audio-api
我正在尝试使用 RecorderJS 库（https://github.com/mattdiamond/Recorderjs），它要求我有一个 AudioContext。但是，在我的脚本开头声明 AudioContext 时，我在页面加载时在控制台中收到一条错误消息，显示“ReferenceError：AudioContext 未定义”。像其他人一样遇到过这样的 AudioContext 问题吗？我已经发布了我的 JS 片段和包含所有内容的 HTML。提前致谢！
JS：
var audioContext = new AudioContext();
var audioInput = null, inputPoint = null, audioRecorder = null;
$(document).ready(function(){
// recording stuff
});
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Recording</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://cwilso.github.io/AudioContext-MonkeyPatch/AudioContextMonkeyPatch.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="recorder.js"></script>
<script src="script.js"></script>
</head>
<body>
<button class="record" type='button'>Record</button>
</body>
</html>
这似乎是一个常见的问题 - Javascript Web Audio API AnalyserNode不起作用 - 但我不能确定我是否找到了我的实现的边缘情况.
我使用createMediaElementSource()创建音频源,但不是使用页面标记中的音频标记,而是使用Buzz.js动态创建元素.
这是我的测试设置:
window.addEventListener('load', function(e) {
audioContext = new webkitAudioContext();
audioAnalyser = audioContext.createAnalyser();
sound = new buzz.sound("sound.mp3");
sound.load().bind("canplaythrough", function(e) {
source = audioContext.createMediaElementSource(this.sound);
source.connect(audioAnalyser);
audioAnalyser.connect(audioContext.destination);
this.play().loop();
});
}, false);
window.setInterval(function(){
array = new Uint8Array(audioAnalyser.frequencyBinCount);
console.log(audioAnalyser.getByteFrequencyData(array));
})
使用上面的代码,声音播放.我还可以附加有效的其他节点(双二阶滤波器,增益等),但audioAnalyser.getByteFrequencyData会在每一帧上返回未定义的值...
可能与使用Buzz.js有关吗？
似乎 AudioContext.createMediaStreamDestination() 默认为单声道输出。此默认值正在更改，但有没有办法手动设置所需的输出通道数？
或者有没有其他方法可以在保留正确数量的频道的同时将流从 WebAudio 获取到 WebRTC？
javascript ×6
audio ×5
html5 ×3
html5-audio ×2
ios ×2
webkit ×2
angular5 ×1
audiocontext ×1
buzz.js ×1
html ×1
mono ×1
node.js ×1
typescript ×1
webrtc ×1