html wavesurfer.js不会加载本地文件

h9vpoimq 于 2023-03-21 发布在其他

关注(0)|答案(3)|浏览(205)

我一直在开发一个在线应用程序，允许用户点击并操作mp3文件，我试图从我的计算机加载本地文件到一个wavesurfer对象，但我一直在chrome中得到这个错误：
“CORS策略已阻止从源”null“访问位于”file：///local/file/path/to/audio/files/some.mp3“的XMLHttpRequest：只有以下协议方案支持跨源请求：http、数据、chrome、chrome扩展、https。”
我试过将HTML和mp3文件放在多台计算机上的多个不同文件夹中，但似乎没有任何效果。

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
    <div id="waveform"></div>

    <script>
        var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'darkorange',
            progressColor: 'blue',
            height: 64,
            backend: 'MediaElement'
        });

        //setRequestHeader('Origin', document.domain);
        //wavesurfer.load("http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3");
        var song = "clippedJaco.mp3";
        wavesurfer.load(song);
        wavesurfer.on('ready', function () {wavesurfer.play();});
    </script>
</body>

当添加“MediaElement”后端时，MP3会加载，但不会生成波形。任何帮助都非常感谢，谢谢！

Html

来源：https://stackoverflow.com/questions/42677632/wavesurfer-js-wont-load-local-file

3条答案

按热度按时间

busg9geu1#

由于你不能从外部源加载资源，出于安全原因，如果你试图从非HTTP源加载资源，这可能会很烦人。有时候不可能放置一个迷你HTTP服务器或修改浏览器标志（不要这样做，这很危险）来解决这个问题。
我最近偶然发现了这个问题，并在一个博客（作者卡洛斯Delgado）上找到了一个很好的解决方案，它使用HTML输入元素加载本地资源，并使用JS blob文件读取器将这些内容传递给wavesurfer代码。

// JS:Initialize WaveSurfer
    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
    });

    // Once the user loads a file in the fileinput, the file should be loaded into waveform
    document.getElementById("fileinput").addEventListener('change', function(e){
        var file = this.files[0];

        if (file) {
            var reader = new FileReader();

            reader.onload = function (evt) {
                // Create a Blob providing as first argument a typed array with the file buffer
                var blob = new window.Blob([new Uint8Array(evt.target.result)]);

                // Load the blob into Wavesurfer
                wavesurfer.loadBlob(blob);
            };

            reader.onerror = function (evt) {
                console.error("An error ocurred reading the file: ", evt);
            };

            // Read File as an ArrayBuffer
            reader.readAsArrayBuffer(file);
        }
    }, false);

<script src="https://unpkg.com/wavesurfer.js"></script>
<!-- HTML: Initialize a div for WaveSurfer -->
<div id="waveform"></div>

<!-- Add a file input where the user should drag the file to load into WaveForm -->
<input type="file" id="fileinput" />

赞(0）回复(0）举报 2023-03-21

vc6uscn92#

据我所知，这是因为出于安全原因，浏览器限制从脚本内部发起的跨源HTTP请求。这意味着使用XMLHttpRequest和Fetch API的Web应用程序只能从加载应用程序的同一源请求HTTP资源，除非来自其他源的响应包含正确的CORS头。
来源：Cross-Origin Resource Sharing (CORS)
解决这个问题的一个方法是在localhost中托管您的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

//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中加载本地音频文件了。希望这能有所帮助。

赞(0）回复(0）举报 2023-03-21

nwsw7zdq3#

此代码片段将工作从本地文件夹加载音频文件。

//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'
});

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

//Loading the audio file you want to play
const audio = new Audio("assets/audio.mp3") // assets folder in root project folder for Vanilla JS
//const audio = new Audio("./assets/audio.mp3") // assets folder in src folder for React JS
wavesurfer.load(audio);

// You can also load wav files if you want
//const audio = new Audio("assets/audio.wav")

赞(0）回复(0）举报 2023-03-21

我来回答

html wavesurfer.js不会加载本地文件

3条答案

相关问题

热门标签

最新问答