javascript - JavaScript 示波器不工作/音频播放问题
问题描述
我是 JS 新手。我在https://github.com/mathiasvr/audio-oscilloscope找到了这个示波器示例。它看起来很简单,但我无法播放音频。HTML5 音频元素显示在浏览器中,它加载音频,但是当我按下播放时没有任何反应。此外,示波器的画布似乎在那里,但这很难说,因为没有音频输入。
我相信这个问题与 npm install 有关,因为我在尝试将它安装到目录时在我的 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>
所以我相信它与这个错误有关,因为据我所知,在画布内创建图形需要节点(?)这也阻止了音频播放(?)
HTML 中的这一行<script src="../dist/oscilloscope.min.js">
也很重要,因为 Git 下载文件中不存在该目录。并且该可选脚本中的 URL 清楚地指向具有此特定目录的特定文件
我一直在逐行尝试找出 JS 中实际发生的情况。感觉就像某处有一些简单的断开连接。我尝试在 JS 中插入“audioElement.play()”,但这不起作用。
我已经尝试过 mp3 和 wav 文件...
此外,为了解决“关于 HTML 的行”,我去了 //unpkg.com/oscilloscope@1.1.0/dist/oscilloscope.min.js 并将其复制/粘贴到 txt 编辑器中,创建了请求的目录/文件. 示波器的线出现了,但音频仍然无法播放......我已经在最底部包含了来自那里的脚本,虽然它没有格式化,所以我把它通过一个“美化器”。由于 new 我不确定 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
解决方案
您无法加载音频文件的原因是因为称为 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 上没有音乐播放器的框架版本,如果你有兴趣可以查看。点击这里
推荐阅读
- android - Android 无法使用签名的 url 将文件上传到谷歌云存储
- c - 关于猜词游戏制作高分表的问题
- .net-core - 如何将 net core 项目发布到 AnyCPU?
- php - 如何在我的 php 代码上添加路径目录,因为当我运行代码并上传文件时,我在第 29 行收到错误
- c++ - c++ 三元运算符期望表达式C/C++(29)
- python - NameError:在封闭范围内赋值之前引用了自由变量“mywidget”
- javascript - Javascript - 从两个数组创建嵌套的对象数组
- xml - 如何使用 grep 和 sed 修改 xml 配置文件?
- java - Spring Boot Actuator - 自定义端点
- python - 如果其他 DataFrame 中不存在某个值,则合并两个 DataFrame