1

我想在我的 Angular 项目上运行 WaveSurfer.js，但它不像我想要的那样工作。WaveSurfer 在索引中完美运行。但是，我想在我的组件中使用 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)

这是我在 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：WaveSurfer.Microphone 示例

我希望你们能帮助我解决这个问题！

4

1 回答 1

1

根据wavesurfer.js Overview，您可以尝试从 npm 安装 wavesurfer。

npm install --save wavesurfer.js@2.0.0-beta01

根据wavesurfer github 页面上的这个问题，让 ES6 导入与 webpack（Angular 4 在后台使用）正常工作可能存在一些问题。该问题有一些关于如何将 wavesurfer 及其插件导入组件的详细信息。

您的组件中的import语句可能如下所示：

import WaveSurfer from 'wavesurfer.js';
import Microphone from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js';

我建议尝试这种方法，并<script>在您的 HTML 中删除任何对 wavesurfer 的标记引用。它干净了很多。

于 2017-08-23T19:54:49.093 回答