折腾：
【未解决】用WebAudioRecorder.js去实现录音并保存为wav格式
期间，不去参考demo网页，自己写代码，结果还是出现类似错误
代码：
<code> // audio context + .createScriptProcessor shim
var audioContext = new AudioContext;
var testTone = (function() {
var osc = audioContext.createOscillator(),
lfo = audioContext.createOscillator(),
ampMod = audioContext.createGain(),
output = audioContext.createGain();
lfo.type = 'square';
lfo.frequency.value = 2;
osc.connect(ampMod);
lfo.connect(ampMod.gain);
output.gain.value = 0.5;
ampMod.connect(output);
osc.start();
lfo.start();
return output;
})();
function testWebAudioRecorder(){
console.log("testWebAudioRecorder")
if (audioContext.createScriptProcessor == null) {
audioContext.createScriptProcessor = audioContext.createJavaScriptNode;
}
var testToneLevel = audioContext.createGain(),
microphone = undefined, // obtained by user click
microphoneLevel = audioContext.createGain(),
mixer = audioContext.createGain();
testTone.connect(testToneLevel);
testToneLevel.gain.value = 0;
testToneLevel.connect(mixer);
microphoneLevel.gain.value = 0;
microphoneLevel.connect(mixer);
mixer.connect(audioContext.destination);
audioRecorder = new WebAudioRecorder(mixer, {
workerDir: "js/WebAudioRecorder/", // must end with slash
onEncoderLoading: function(recorder, encoding) {
console.log("onEncoderLoading: recorder=", recorder, ", encoding=", encoding)
},
onEncoderLoaded: function() {
console.log("onEncoderLoaded")
}
});
console.log("audioRecorder=", audioRecorder)
}
</code>和文件：
已确保都各个js都放在了同一目录下了
但是运行出错：
<code>Try getUserMedia error: DOMException: Failed to construct 'Worker': Script at 'file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/WebAudioRecorder/WebAudioRecorderWav.js' cannot be accessed from origin 'null'. at WebAudioRecorder.initWorker (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/WebAudioRecorder/WebAudioRecorder.js:151:21) at new WebAudioRecorder (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/WebAudioRecorder/WebAudioRecorder.js:61:10) at testWebAudioRecorder (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/main.js:421:25) at onSuccessGetUserMedia (file:///Users/crifan/dev/dev_root/xxx/projects/xx/www/xxRobotDemoWeb/js/main.js:441:9) </code>
Try getUserMedia error: DOMException: Failed to construct ‘Worker’: Script at WebAudioRecorderWav.js’ cannot be accessed from origin ‘null’
Try getUserMedia error: DOMException: Failed to construct ‘Worker’
但是我就想要本地测试，怎么解决？
DOMException: Failed to construct ‘Worker’
Failed to construct ‘Worker’: Script at ….. · Issue #84 · medialize/sass.js
谷歌浏览器web worker出现cannot be accessed from origin ‘null’错误 – CSDN博客
换Safari试试
结果Safari中报错：
<code>ReferenceError: Can't find variable: AudioContext （匿名函数） — main.js:383 fire — jquery-1.11.1.js:3119 fireWith — jquery-1.11.1.js:3231 ready — jquery-1.11.1.js:3443 completed — jquery-1.11.1.js:3474 </code>
safari ReferenceError: Can’t find variable: AudioContext
javascript – AudioContext on Safari – Stack Overflow
Can I use… Support tables for HTML5, CSS3, etc
Safari 浏览器
版本 11.1.1 (13605.2.8)
是支持：audio api的：
然后试了试：
<code> // var audioContext = new AudioContext;
var audioContext = null;
if (window.AudioContext) {
audioContext = new window.AudioContext()
} else if (window.webkitAudioContext) {
audioContext = new window.webkitAudioContext()
} else {
console.error("Not support AudioContext!")
}
</code>是可以的：
但是后面的
<code>
function testAudioInput(){
console.log("testAudioInput");
var mediaConstraints = {
audio: true,
video: false
};
console.log("mediaConstraints=%o", mediaConstraints);
navigator.mediaDevices
.getUserMedia(mediaConstraints)
.then(onSuccessGetUserMedia)
.catch(function (error) {
console.error("Try getUserMedia error: %o", error);
//Chorome click not allow -> DOMException: Permission denied
//Safari -> Trying to call getUserMedia from an insecure document.
});
}
</code>却报错了：
结果是还是无法正常使用audio的录音功能：
不过前面的写法改为：
Not working on Safari / Chrome (MacOS) · Issue #7 · Okazari/Rythm.js
中的：
<code> var AudioContext = window.AudioContext // Default
|| window.webkitAudioContext; // Safari and old versions of Chrome
if (!AudioContext) {
console.error("Not support AudioContext!")
}
var audioContext = new AudioContext()
</code>更合适。
javascript – 音频上下文在Safari – 开源问答
【总结】
此处的WebAudioRecorder去初始化audio时，用到了Web Worker
而Web Worker对于Chrome，不支持：本地调试，会报错：
<code>Try getUserMedia error: DOMException: Failed to construct 'Worker': Script at WebAudioRecorderWav.js' cannot be accessed from origin ‘null' </code>
而换用（好像是）支持Web Worker的Safar，此处对于代码：
<code> navigator.mediaDevices
.getUserMedia(mediaConstraints)
.then(onSuccessGetUserMedia)
.catch(function (error) {
console.error("Try getUserMedia error: %o", error);
//Chorome click not allow -> DOMException: Permission denied
//Safari -> Trying to call getUserMedia from an insecure document.
});
</code>却又出错：
<code>Trying to call getUserMedia from an insecure document. Try getUserMedia error: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. </code>
而自己又不想要去：
本地搭建web服务器，然后才能基于Chrome去调试这个用到了Web Worker的WebAudioRecorder
所以只能放弃。
【后记】
后来去：
【已解决】用Recorderjs实现js录音保存为wav格式
看到：
https://github.com/mattdiamond/Recorderjs/blob/master/examples/example_simple_exportwav.html
中提到了：
<code>navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; </code>
试试Safari中改为：
<code> navigator.mediaDevices // .getUserMedia(mediaConstraints) .webkitGetUserMedia(mediaConstraints) </code>
结果：
<code>TypeError: navigator.mediaDevices // .getUserMedia(mediaConstraints) .webkitGetUserMedia is not a function. (In 'navigator.mediaDevices // .getUserMedia(mediaConstraints) .webkitGetUserMedia(mediaConstraints)', 'navigator.mediaDevices // .getUserMedia(mediaConstraints) .webkitGetUserMedia' is undefined) </code>
看来不是这个问题。
转载请注明：在路上 » 【未解决】WebAudioRecorder初始化出错：Try getUserMedia error: DOMException: Failed to construct ‘Worker’