在客户端和 file:/// 中使用 Audio Waves 播放 mp3

Question

我正在尝试使用 wavesurfer-js

加载音频波

这很好用，但对我来说挑战是从 chrome 中的 file:/// 协议加载。

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

加载文件失败：///Users/ashokshah/audioWaveTest/audio.wav：仅协议方案支持跨源请求：http、数据、chrome、chrome -扩展名，https.

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});

window.onload = function () {
  wavesurfer.load('audio.wav');
}

<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>

请帮助我实现在 chrome 中显示来自 file:/// 协议的音频波。

Answer 1

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

来源：Cross-Origin Resource Sharing (CORS)

解决此问题的一种方法是在本地主机中托管您的 Web 应用程序。您可以使用 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>

然后添加一个脚本来处理 wavesurfer 实例。在我的例子中是 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();
});

这样我就可以轻松地将本地音频文件加载到 wavesurfer。希望这可以帮助。

Answer 2

我找到了绕过跨域策略的解决方案，方法是将音频文件 blob 创建到 JavaScript 变量中，并使用它代替音频路径。

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

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

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);

在客户端和 file:/// 中使用 Audio Waves 播放 mp3

Play mp3 with Audio Waves in client side and file:///

javascript

audio

html5-audio

wavesurfer.js

soundwaves