1
AngularプロジェクトでWaveSurfer.jsを実行したいと思います。 WaveSurferは完全にインデックス内で動作します。しかし、私はWaveSurferを自分のコンポーネントに入れたいが、うまくいかない。私のコンポーネントでAngular 4はWaveSurferを実行できません
指数（作品）：
<!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)
ティsがwavesurfer.js
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();
である私のJavaScriptコードここでWaveSurferがある私が使用しています：WaveSurfer.Microphone Example
を、私はあなたたちはこの問題で私を助けることができると思います！
画像を追加するのではなく、[あなたのコードをフォーマットする]（https://stackoverflow.com/editing-help）のコードを追加してください。 – Dwhitz
ありがとう、私はイメージを実際のコードに置き換えました。他の欠点がある場合は教えてください。 – Oruma