Не работает осциллограф JavaScript / проблема воспроизведения аудио - PullRequest
0 голосов
/ 31 января 2019

Я новичок в JS.Я нашел этот пример осциллографа в https://github.com/mathiasvr/audio-oscilloscope Это выглядело довольно просто, но я не могу воспроизвести звук.Элемент аудио HTML5 отображается в браузере, он загружает звук, но когда я нажимаю кнопку воспроизведения, ничего не происходит.Кроме того, холст для осциллографа, кажется, там, но это трудно сказать, так как нет аудиовхода.

Я считаю, что проблема связана с установкой npm, поскольку я получаю это сообщение об ошибке в моем cmdпри попытке установить его в каталог.

npm ERR! code ENOSELF

npm ERR! Refusing to install package with name "oscilloscope" under a 
package also called"oscilloscope".

Did you name your project the same at the dependency you're installing?

Я изменил имя каталога, но сообщается об этом же сообщении об ошибке.

Кроме того, есть возможность вставить этотстрока сценария в HTML, но это тоже не работает ...

<script src="//unpkg.com/oscilloscope@1.1.0/dist/oscilloscope.min.js"> 
</script>

Так что я считаю, что это как-то связано с этой ошибкой, поскольку, насколько я понимаю, узлы необходимы для создания графавнутри холста (?) И это также препятствует воспроизведению аудио (?)

Эта строка <script src="../dist/oscilloscope.min.js"> в HTML также относится к тому, потому что каталог отсутствует в файлах загрузки Git.И URL в этом необязательном скрипте явно указывает на этот конкретный файл с этим конкретным каталогом

Я проходил построчно, пытаясь выяснить, что на самом деле происходит в JS.Такое ощущение, что где-то есть какое-то простое разъединение.Я попытался вставить "audioElement.play ()" в JS, но это не работает.

Я пробовал файлы mp3 и wav ...

Кроме того, чтобы обратиться к«Относительно строки HTML» Я пошел на //unpkg.com/oscilloscope@1.1.0/dist/oscilloscope.min.js и просто скопировал / вставил это в текстовый редактор, создал запрошенный каталог / файл.Появляется строка для осциллографа, но звук по-прежнему не воспроизводится ... Я включил сценарий оттуда также в самом низу, хотя он не был отформатирован, поэтому я поставил его через «beautifier».Поскольку я новичок, я не уверен, какое будет правильное форматирование для JS.

Любое направление приветствуется

<html>
<head>
  <title>Oscilloscope</title>
  <style>
    body {
      margin: 0;
      background-color: #1a1a1a;
      color: #dddddd;
    }
    canvas {
      display: block;
    }
  </style>
<!-- this script or npm -->
<!-- <script src="//unpkg.com/oscilloscope@1.1.0/dist/oscilloscope.min.js"></script> -->
</head>
<body>
  <script src="../dist/oscilloscope.min.js"></script>
  <!-- Examples -->
  <!-- <script src="microphone.js"></script> -->
  <script src="audio-element.js"></script>
  <!-- <script src="custom.js"></script> -->
</body>
</html>

JS

var audioContext = new window.AudioContext()

// setup canvas
var canvas = document.createElement('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight - 50
document.body.appendChild(canvas)

// setup audio element
var audioElement = document.createElement('audio')
audioElement.controls = true
audioElement.autoplay = false
audioElement.src = 'freak.mp3'
audioElement.play()
document.body.appendChild(audioElement)

// create source from html5 audio element
var source = audioContext.createMediaElementSource(audioElement)

// attach oscilloscope
var scope = new Oscilloscope(source)

// reconnect audio output to speakers
source.connect(audioContext.destination)

// customize drawing options
var ctx = canvas.getContext('2d')
ctx.lineWidth = 2
ctx.strokeStyle = '#ffffff'

// start default animation loop
scope.animate(ctx)

JS.min

! function(t, e) {
    "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.Oscilloscope = e()
}(this, function() {
    "use strict";
    var t = function(t, e) {
        if (void 0 === e && (e = {}), !(t instanceof window.AudioNode)) throw new Error("Oscilloscope source must be an AudioNode");
        t instanceof window.AnalyserNode ? this.analyser = t : (this.analyser = t.context.createAnalyser(), t.connect(this.analyser)), e.fftSize && (this.analyser.fftSize = e.fftSize), this.timeDomain = new Uint8Array(this.analyser.frequencyBinCount), this.drawRequest = 0
    };
    return t.prototype.animate = function(t, e, i, n, a) {
        var o = this;
        if (this.drawRequest) throw new Error("Oscilloscope animation is already running");
        this.ctx = t;
        var s = function() {
            t.clearRect(0, 0, t.canvas.width, t.canvas.height), o.draw(t, e, i, n, a), o.drawRequest = window.requestAnimationFrame(s)
        };
        s()
    }, t.prototype.stop = function() {
        this.drawRequest && (window.cancelAnimationFrame(this.drawRequest), this.drawRequest = 0, this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height))
    }, t.prototype.draw = function(t, e, i, n, a) {
        void 0 === e && (e = 0), void 0 === i && (i = 0), void 0 === n && (n = t.canvas.width - e), void 0 === a && (a = t.canvas.height - i), this.analyser.getByteTimeDomainData(this.timeDomain);
        var o = n / this.timeDomain.length;
        t.beginPath();
        for (var s = 0; s < this.timeDomain.length; s += 2) {
            var r = e + s * o,
                c = i + a * (this.timeDomain[s] / 256);
            t.lineTo(r, c)
        }
        t.stroke()
    }, t
});
//# sourceMappingURL=oscilloscope.min.js.map

1 Ответ

0 голосов
/ 01 февраля 2019

Причина, по которой вы не можете загрузить аудиофайл, заключается в том, что что-то называется CORS, если вы посмотрите на консоль, вы, вероятно, увидите предупреждение под названием Access to audio from origin 'null' has been blocked by CORS policy:.

Протокол file: // не работает с CORS, поэтому попытка доступа к вашему файлу с использованием локальной файловой системы в вашем случае не работает.Вы можете исправить это, отправив свои файлы через сервер или загрузив их через FileReader.

Вот пример версии программы для чтения файлов.

вам потребуется добавить тег вводакоторый принимает аудиофайлы.

<input id="upload_files" type="file" accept="audio/*">

После этого вам нужно будет добавить этот фрагмент javascript в ваш файл osciloscope.main.js

audioElement.setAttribute("crossorigin", "anonymous");
document.getElementById("upload_files").onchange= function(event)
{
    var reader= new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload= function(e)
    {   
        audioElement.setAttribute("src", e.target.result);
        audioElement.play();
    }
};

Я сделал несколько других изменений втакже и файлы.

HTML

<html>
<head>
  <title>Oscilloscope</title>
  <style>
    body {margin: 0; background-color: #1a1a1a; color: #dddddd;}
    canvas {display: block;}
  </style>
<script src="https://unpkg.com/oscilloscope@1.1.0/dist/oscilloscope.min.js"></script>
</head>
<body>
  <input id="upload_files" type="file" accept="audio/*">
  <script type= "text/javascript" src="../dist/oscilloscope.min.js"></script>
</body>
</html>

JAVASCRIPT

audioElement.setAttribute("crossorigin", "anonymous");
document.getElementById("upload_files").onchange= function(event)
{
    var reader= new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload= function(e)
    {   
        audioElement.setAttribute("src", e.target.result);
        audioElement.play();
    }
};

var audioContext = new window.AudioContext();

// setup canvas
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 50;
document.body.appendChild(canvas);

// setup audio element
var audioElement = document.createElement('audio');
audioElement.controls = true;
document.body.appendChild(audioElement);

// create source from html5 audio element
var source = audioContext.createMediaElementSource(audioElement);

// attach oscilloscope
var scope = new Oscilloscope(source);

// reconnect audio output to speakers
source.connect(audioContext.destination);

// customize drawing options
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2;
ctx.strokeStyle = '#ffffff';

// start default animation loop
scope.animate(ctx);

У меня на самом деле простой JS-ваниль, без фреймворковой версии музыкального проигрывателя на моемGitHub, вы можете проверить это, если вам интересно. Нажмите здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...