Я новичок в 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