因此,我正在尝试Web Audio API使用Node.js和Socket.IO解码和播放流式传输到浏览器的MP3文件块.
我的问题是我唯一的选择是AudioBufferSourceNode为每个接收到的音频数据块创建一个新的,还是可以为所有块创建一个AudioBufferSourceNode,只需将新的音频数据附加到源节点AudioBufferSourceNode属性的末尾？
目前,我正在接收我的MP3块,解码并安排它们进行播放.我已经验证了收到的每个块都是一个"有效的MP3块",并且正在被Web Audio API成功解码.
audioContext = new AudioContext();
startTime = 0;
socket.on('chunk_received', function(chunk) {
audioContext.decodeAudioData(toArrayBuffer(data.audio), function(buffer) {
var source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(audioContext.destination);
source.start(startTime);
startTime += buffer.duration;
});
});
任何有关如何使用新音频数据"更新"Web音频API播放的建议或见解将不胜感激.
在最近添加支持后,我试图通过iOS11上的Safari上的麦克风进行音频捕获
但是,onaudioprocess永远不会调用回调.这是一个示例页面:
<html>
<body>
<button onclick="doIt()">DoIt</button>
<ul id="logMessages">
</ul>
<script>
function debug(msg) {
if (typeof msg !== 'undefined') {
var logList = document.getElementById('logMessages');
var newLogItem = document.createElement('li');
if (typeof msg === 'function') {
msg = Function.prototype.toString(msg);
} else if (typeof msg !== 'string') {
msg = JSON.stringify(msg);
}
var newLogText = document.createTextNode(msg);
newLogItem.appendChild(newLogText);
logList.appendChild(newLogItem);
}
}
function doIt() {
var handleSuccess = function (stream) {
var context = new AudioContext();
var input = context.createMediaStreamSource(stream)
var processor = …实时移动波形
我目前正在使用Web Audio API并使用画布制作光谱.
function animate(){
var a=new Uint8Array(analyser.frequencyBinCount),
y=new Uint8Array(analyser.frequencyBinCount),b,c,d;
analyser.getByteTimeDomainData(y);
analyser.getByteFrequencyData(a);
b=c=a.length;
d=w/c;
ctx.clearRect(0,0,w,h);
while(b--){
var bh=a[b]+1;
ctx.fillStyle='hsla('+(b/c*240)+','+(y[b]/255*100|0)+'%,50%,1)';
ctx.fillRect(1*b,h-bh,1,bh);
ctx.fillRect(1*b,y[b],1,1);
}
animation=webkitRequestAnimationFrame(animate);
}
迷你问题:有没有办法不写2次new Uint8Array(analyser.frequencyBinCount)？
DEMO
添加MP3/MP4文件并等待.(在Chrome中测试过)
但是有很多问题.我找不到各种音频滤镜的正确文档.
此外,如果您查看光谱,您会注意到在70%或范围之后没有数据.那是什么意思？可能从16k赫兹到20k赫兹没声音？我会在画布上应用一个文本来显示各种HZ.但是哪里？？
我发现返回的数据的长度为32,最大值为2048,高度始终为256.
但真正的问题是......我想创建一个像traktor一样的移动波形.
我不久前用PHP做过它,它将文件转换为低比特率而不是提取数据并将其转换为图像.我在某处发现了剧本...但我不记得在哪里......注意:需要LAME
<?php
$a=$_GET["f"];
if(file_exists($a)){
if(file_exists($a.".png")){
header("Content-Type: image/png");
echo file_get_contents($a.".png");
}else{
$b=3000;$c=300;define("d",3);
ini_set("max_execution_time","30000");
function n($g,$h){
$g=hexdec(bin2hex($g));
$h=hexdec(bin2hex($h));
return($g+($h*256));
};
$k=substr(md5(time()),0,10);
copy(realpath($a),"/var/www/".$k."_o.mp3");
exec("lame /var/www/{$k}_o.mp3 -f -m m -b 16 --resample 8 /var/www/{$k}.mp3 && lame --decode /var/www/{$k}.mp3 /var/www/{$k}.wav");
//system("lame {$k}_o.mp3 -f -m m -b 16 --resample …我正在创建一个chrome扩展程序,它使用chrome tabCapture API从选项卡中捕获音频.我想在另一个html页面中播放这个音频流,希望最终为它创建一个可视化器.
我在后台脚本中捕获音频
chrome.browserAction.onClicked.addListener(function(activeTab) {
var constraints = {
audio: true,
video: false,
};
var visualizerPage = chrome.extension.getURL("/views/visualizer.html");
chrome.tabCapture.capture(constraints, function(stream) {
console.log("\ngot stream");
console.log(stream);
chrome.tabs.create({
url: visualizerPage
}, function(tab) {
chrome.tabs.sendMessage(tabID, {
"message": "stream",
"stream": stream
});
});
});
从单击扩展名的任何页面捕获音频流.打开另一个选项卡,音频流将作为消息发送给它.
visualizer.html页面的javascript是
function loadStream(stream) {
// what do I have to put here to play the stream?
}
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.message === "stream") {
var stream = request.stream;
if (!stream) {
console.log("stream is null");
return;
} …javascript html5 google-chrome-extension html5-audio web-audio-api
我正在研究一个基于网络的音序器/跟踪器,我注意到在我的示例播放例程中,音频上下文似乎只存在于样本的持续时间内,并且Web Audio API似乎不一样我调整样本时调整播放持续时间.例如,如果我将音符向下移动一个八度音程,则例程仅在切断之前播放声音的前半部分.更强烈的音高降档导致更少的声音播放,虽然我不确定我能否证实这一点,但我怀疑加速音频会在声音退出缓冲区之前产生相对长时间的静音.
这是我目前的音频播放程序.到目前为止,还有很多工作要确保其他函数向此发送正确的数据,而不是扩展此例程的功能.
function playSound(buffer, pitch, dspEffect, dspValue, volume) {
var source = audioEngine.createBufferSource();
source.buffer = buffer;
source.playbackRate.value = pitch;
// Volume adjustment is handled before other DSP effects are added.
var volumeAdjustment = audioEngine.createGain();
source.connect(volumeAdjustment);
// Very basic error trapping in case of bad volume input.
if(volume >= 0 && volume <= 1) {
volumeAdjustment.gain.value = volume;
} else {
volumeAdjustment.gain.value = 0.6;
}
switch(dspEffect){
case 'lowpass':
var createLowPass = audioEngine.createBiquadFilter();
volumeAdjustment.connect(createLowPass);
createLowPass.connect(audioEngine.destination);
createLowPass.type = 'lowpass';
createLowPass.frequency.value = …I'm streaming recorded PCM audio from a browser with web audio api.
I'm streaming it with binaryJS (websocket connection) to a nodejs server and I'm trying to play that stream on the server using the speaker npm module.
This is my client. The audio buffers are at first non-interleaved IEEE 32-bit linear PCM with a nominal range between -1 and +1. I take one of the two PCM channels to start off and stream it below.
var client = …有没有办法AudioContext在我创建之后删除它？
var analyzers = [];
var contexts = [];
try {
for(var i = 0; i<20; i++) {
contexts[i] = new AudioContext();
analyzers[i] = contexts[i].createAnalyser();
}
}catch(e) {
console.log(e);
// too many contexts created -- how do I remove them?
}
我试过这个,但它不会让我在事后创建新的上下文: analyzers.forEach(function(analyzer){analyzer.disconnect(analyzer.context.destination)})
我在Ubuntu Linux 14.04上使用Chrome 36.
我正在玩Web Audio API并尝试找到导入mp3的方法(所以这只在Chrome中),并在画布上生成它的波形.我可以实时做到这一点,但我的目标是比实时更快地做到这一点.
我能够找到的所有示例都涉及从onaudioprocess事件附带的函数中读取分析器对象的频率数据:
processor = context.createJavascriptNode(2048,1,1);
processor.onaudioprocess = processAudio;
...
function processAudio{
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
//calculate magnitude & render to canvas
}
但是看起来,analyser.frequencyBinCount只有在播放声音时才会填充(有关填充缓冲区的信息).
我想要的是能够尽可能快地手动/编程地逐步浏览文件,以生成画布图像.
到目前为止我得到的是:
$("#files").on('change',function(e){
var FileList = e.target.files,
Reader = new FileReader();
var File = FileList[0];
Reader.onload = (function(theFile){
return function(e){
context.decodeAudioData(e.target.result,function(buffer){
source.buffer = buffer;
source.connect(analyser);
analyser.connect(jsNode);
var freqData = new Uint8Array(buffer.getChannelData(0));
console.dir(analyser);
console.dir(jsNode);
jsNode.connect(context.destination);
//source.noteOn(0);
});
};
})(File);
Reader.readAsArrayBuffer(File);
});
但是getChannelData()总是返回一个空的类型数组.
任何见解都会受到赞赏 - 即使事实证明它无法完成.我想我是唯一一个互联网不想要做的东西,在实时.
谢谢.
我来到这里希望你们这里可爱的人们可以帮我解决一些我遇到的问题.
具体来说,每次我尝试使用webkitAudioContext的decodeAudioData方法时,它总是以空错误触发错误处理程序.这是我目前使用的代码:
var soundArray;
var context = new webkitAudioContext();
function loadSound(soundName) {
var request = new XMLHttpRequest();
request.open('GET',soundName);
request.responseType = 'arraybuffer';
request.onload = function() {
context.decodeAudioData(this.response, function(buf) {
sounds[soundName] = buf;
},function(err) { console.log("err(decodeAudioData): "+err); });
}
request.send();
}
此时,它不断地将错误消息记录到控制台说err(decodeAudioData) = null,主要是因为这就是我决定记录它的方式.在任何情况下,任何想法为什么会这样？
我正在使用Chrome Canary,v20.0.1121.0来尝试获得一些有用的功能.但是,显然,它不起作用!那么,任何想法我可以做什么？如果需要任何新信息,请告诉我,我会根据需要进行更新.
我正在使用带有NodeJS后端的Google Cloud API for Speech-to-text.应用程序需要能够侦听语音命令,并将它们作为缓冲区传输到后端.为此,我需要在检测到静音时发送前一个音频的缓冲区.
任何帮助,将不胜感激.包括下面的js代码
if (!navigator.getUserMedia)
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true}, success, function (e) {
alert('Error capturing audio.');
});
} else alert('getUserMedia not supported in this browser.');
var recording = false;
window.startRecording = function () {
recording = true;
};
window.stopRecording = function () {
recording = false;
// window.Stream.end();
};
function success(e) {
audioContext = window.AudioContext || window.webkitAudioContext;
context = new audioContext();
// the sample rate is in …javascript node.js audiocontext web-audio-api google-cloud-speech
web-audio-api ×10
javascript ×8
html5 ×5
audio ×4
node.js ×2
webkit ×2
audiocontext ×1
canvas ×1
html ×1
html5-audio ×1
ios ×1
ios11 ×1
pcm ×1
safari ×1
stream ×1
streaming ×1