折腾:
【未解决】用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’