当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Audio signal unstable after 14s using Web Audio API

问题描述:

I've managed to apply a distiortion effect to an incoming audio signal and with the use of Recorder.js it's even easy to save a recording to a file. This is great because it enables you to build cool effects and easily capture the audio output and mix it in something like Audacity.

However, the signal seems to become unstable after some time, at around 14 seconds. The low frequencies drop and sort of a digitally flanger comes along. The volume also drops and jumps, it becomes quite chaotic. A slightly distorted bass loop recording going down after about 14 seconds to illustrate this can be listened to here.

Recording doesn't seem to be the problem. When I just activate the live stream and monitor the signal I can see/hear the same thing happen when the stream has been going for about 14 seconds.

My first thought is that buffers might be running out after a while?

The app (only works in Chrome for now) in the making that I'm making these recordings with:

http://zzp-online-marketing.nl/js-portfolio/audio-manip/liveOutput.html

It makes use of the createScriptProcessor method, which I understood can cause some trouble. I know it adds a lot of latency, but might it affect the quality of a recording over a relatively longer period?

I'm running this on Windows 8.1 using Chrome 40.0.2214.91 m

Edit: This is the code at its most stripped down that is causing the issue. It's really just connecting soundcard input to destination output.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Distortion effect debug</title>

</head>

<body>

<script type="text/javascript">

var AudioContext = window.AudioContext || window.webkitAudioContext;

var context = new AudioContext();

var liveSource;

navigator.getUserMedia = ( navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

navigator.getUserMedia({audio: true, video:false }, function(stream) {

liveSource = context.createMediaStreamSource(stream);

liveSource.connect(context.destination);

}, function(err){alert(err);});

</script>

</body>

</html>

Sincerely,

Lucas

分享给朋友:
您可能感兴趣的文章:
随机阅读: