Question

我正在尝试使用wavesurfer-js

加载音频波

这很有效，但对我来说，挑战是从chrome中加载file：/// protocol。

从本地加载时出现以下错误。

无法加载文件：///Users/ashokshah/audioWaveTest/audio.wav：交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https。

＆＃13;

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});

window.onload = function () {
  wavesurfer.load('audio.wav');
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>

<div id="waveform"></div>


<button onClick="wavesurfer.play()">Play</button>

＆＃13;

请帮我从file：/// protocol。

显示chrome中的音频波形

Answer 1

我找到了一种解决方案，可以通过将音频文件的blob创建到JavaScript变量中并使用它而不是音频路径来绕过跨域策略。

您可以使用https://www.npmjs.com/package/stream-to-blob或使用许多其他选项来创建音频文件的斑点。

无论您获得什么文本内容，都只需将其存储到JavaScript变量中，然后使用该变量而不是音频路径来加载wave冲浪者。给出以下示例：

var myAudio = "data:audio/x-wav;base64,UklGR..."; // enter complete blob data. I have removed it since it was not allowing to paste me completely
waveSurfer.load(myAudio);

Answer 2

据我了解，这是因为出于安全原因，浏览器限制了从脚本内部发起的跨域HTTP请求。这意味着使用XMLHttpRequest和Fetch API的Web应用程序只能从加载该应用程序的同一来源请求HTTP资源，除非来自其他来源的响应包括正确的CORS标头。

来源：Cross-Origin Resource Sharing (CORS)

解决此问题的一种方法是将Web应用程序托管在localhost中。您可以使用this入门。然后在index.html文件中调用wavesurfer.js，并在其中创建要显示波形的容器。

index.html

<!doctype html>
<!-- You can use this link as well to call wavesurfer.js. This is what's given on their updated documentation-->
<!-- <script src="https://unpkg.com/wavesurfer.js"></script> -->

<head>
  <title>Test Website</title>
</head>

<body>
  <!-- Adding wavesurfer.js script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
  
  <h1>Wavesurfer Test</h1>
  
  <!-- !-- Create a container where the waveform is to appear-->
  <div id="waveform"></div>
  
  <script src="script/main.js" defer="defer"></script>
  <script src="script/test.js"></script>
</body>

</html>

然后添加一个脚本来处理waveurfer实例。就我而言，它是test.js

test.js

//Creating  a wavesurfer instance, passing the container selector along with some options like progress color and wave color
var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});

//Loading the audio file you want to play
wavesurfer.load('audio/LOVE_s.mp3');

// You can also load wav files if you want
//wavesurfer.load('audio/songaudio.wav');

//This is the event you play the wavesurver instance i.e when wavesurfer ready event
wavesurfer.on('ready', function() {
  wavesurfer.play();
});

这样，在将本地音频文件加载到waveurfer时，我没有任何麻烦。希望这可以帮助。

在客户端播放带有Audio Waves的mp3文件：///

2 个答案: