Node.js и Wavesurfer.js - PullRequest
Новая
       44

Node.js и Wavesurfer.js

0 голосов
/ 03 марта 2019

До этого момента в моих исследованиях я мог подавать файлы на свои динамические веб-страницы с помощью Node.js и Express следующим образом. 

app.use(express.static('./public'));

и затем связываться с файлами в общей папке.

В документации Wavesurfer.js указано, что файл должен быть загружен с URL

Загрузка аудиофайла с URL: 

wavesurfer.load('example/media/demo.wav');

Я не уверен, что понимаю, что это значит.или как связать файл с wavesurfer.js, используя node.js

Редактировать:

Я нашел это по ссылке Запросы перекрестного происхождения поддерживаются только дляHTTP. »Ошибка при загрузке локального файла

Node.js В качестве альтернативы, если вам требуется более адаптивная настройка и вы уже используете nodejs ...

  1. Установитьhttp-server, набрав npm install -g http-server

  2. Перейдите в рабочий каталог, где живет some.html

  3. Запустите сервер http, выполнив командуhttp-server -c-1

Это раскручивает httpd Node.js, который обслуживает файлы в вашем каталоге как статические файлы, доступные с http://localhost:8080

Не могу я достичьТо же самое с использованием экспресс?

Мой код: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="waveform"></div>

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

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

            wavesurfer.load('/public/recordings/o.mp3');


        </script>
    </body>
</html>

Я получаю ошибки:

AudioContext не было разрешеноНачните.Он должен быть возобновлен (или создан) после пользовательского жеста на странице.

Доступ к XMLHttpRequest по адресу 'file: /// C: /public/recordings/o.mp3' из источника 'null' был заблокирован политикой CORS: Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https.

1 Ответ

0 голосов
/ 03 марта 2019

Хорошо, я думаю, что ваша проблема в том, что вы открываете страницу .html в своем браузере локально (как file://).Вместо этого попробуйте загрузить его с вашего сервера Express, что-то вроде http://localhost: порт /some file.html

...