Javascript 角形4罐';不要在我的组件中运行WaveSurfer
我想在我的Angular项目上运行WaveSurfer.js,但它不能像我想的那样工作。 WaveSurfer在索引中工作完美。但是,我想在我的组件中使用WaveSurfer,但它不起作用 索引(工作):Javascript 角形4罐';不要在我的组件中运行WaveSurfer,javascript,angular,typescript1.8,wavesurfer.js,Javascript,Angular,Typescript1.8,Wavesurfer.js,我想在我的Angular项目上运行WaveSurfer.js,但它不能像我想的那样工作。 WaveSurfer在索引中工作完美。但是,我想在我的组件中使用WaveSurfer,但它不起作用 索引(工作): <!doctype html> <html lang="en"> <head> <script src="assets/js/wavesurfer.min.js"></script>< <script src="waves
<!doctype html>
<html lang="en">
<head>
<script src="assets/js/wavesurfer.min.js"></script><
<script src="wavesurfer.microphone.min.js"></script>
<meta charset="utf-8">
<title>WaveAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<div id="waveform"></div>
<script src="assets/js/wavesurfer.js">
</script>
</script>
</body>
</html>
<div class="dashboard-voice-parent">
<div class="dashboard-voice-Visualication">
<div id="waveform"></div>
<script src="assets/js/wavesurfer.js"></script>
</div>
<div class="dashboard-voice-buttoncontainer">
<div class="dashboard-voice-buttonborder ">
<button type="button" class="dashboard-voice-animated"
onclick="microphone.pause()" >
<img src="/assets/svg/PauseBTN.png" >
</button>
<button type="button" class="dashboard-voice-VoiceBTN"
onclick="microphone.start()" >
<img src="/asset`enter code here`s/svg/VoiceBTN.png">
</button>
<button type="button" class="dashboard-voice-animated"
onclick="microphone.stopDevice()" >
<img src="/assets/svg/StopBTN.png" >
</button>
</div>
</div>
</div>
Uncaught ReferenceError: microphone is not defined
at HTMLButtonElement.onclick ((index):17)
这是我在wavesurfer.js中的JavaScript代码
var
wavesurfer=WaveSurfer.create({container:'#waveform',waveColor:'grey'});
var microphone = Object.create(WaveSurfer.Microphone);
microphone.init({
wavesurfer: wavesurfer
});
microphone.on('deviceReady', function(stream) {
console.log('Device ready!', stream);
});
microphone.on('deviceError', function(code) {
console.warn('Device error: ' + code);
});
microphone.pause();
microphone.play();
microphone.stopDevice();
这是我正在使用的WaveSurfer:
我希望你们能帮我解决这个问题 根据,您可以尝试从npm安装wavesurfer
npm安装--保存wavesurfer。js@2.0.0-beta01
根据这一点,让ES6导入正确使用webpack(Angular 4在引擎盖下使用)可能会有一些问题。本期有一些关于如何将wavesurfer及其插件导入组件的详细信息
组件中的import
语句可能如下所示:
import WaveSurfer from 'wavesurfer.js';
import Microphone from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js';
我建议尝试这种方法,并在HTML中去掉对wavesurfer的任何
标记引用。它相当干净。请不要添加图像,而是在问题中添加代码。感谢您的回复,我用实际代码替换了图像。如果有任何其他缺点,请告诉我。如果不设置“麦克风”选项,则发现此项不起作用:WaveSurfer.micros=麦克风
注意,import语句上没有大括号{}
(表示默认导入)<代码>从'WaveSurfer.js'导入{WaveSurfer}代码>不起作用。