ReferenceError：音频未定义

Question

我正在为客户在 Meteor 中构建一个音频播放器。

当我尝试创建音频对象时遇到错误。我正在使用以下代码。知道为什么会发生这种情况吗？任何帮助将不胜感激。

// Define Audio
song = new Audio('/audio/waitforme.mp3');

// Define Play
play = $('#playicon');

$(function() {
$('#playicon').on("click", function() {
e.preventDefault();
song.play();
})
});


ReferenceError: Audio is not defined
    at AlannaSite.js:2:14
    at AlannaSite.js:12:4
    at /Users/CorrinSite/.meteor/local/build/programs/server/boot.js:242:10
    at Array.forEach (native)
    at Function._.each._.forEach (/Users/AriKamin/.meteor/packages/meteor-        tool/.1.1.9.1sd3e7j++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
    at /Users/CorrinSite/.meteor/local/build/programs/server/boot.js:137:5

Answer 1

我认为这里有一个误解。您拥有正确的代码，但它在不同的上下文中运行。

对于 Meteor，NodeJS 后端也在运行您的“客户端”代码。遗憾的是，NodeJS 不支持您正在使用的音频 API，但您的浏览器支持。

在客户端和服务器端服务和运行的代码可能会让人有点困惑，无法了解客户端 + 服务器之间的界限，尤其是当 Meteor 试图模糊这些界限时！

我会查找 Meteor 的架构，以便您可以最好地构建代码以针对“客户端”与“后端”环境。这里有一篇很棒的文章：https://www.discovermeteor.com/blog/what-goes-where/

基本上，Meteor 提供了两个目录，您可以使用它们专门针对客户端或服务器。您可以将文件放入

/client

或

/server

，我们将为您处理。

对于快速操作或在两种上下文中使用的文件，Meteor 文档解释了一个名为

Meteor.isClient

或

Meteor.isServer

的布尔标志，您可以使用它来标记仅在客户端/服务器端运行的代码: http://docs.meteor.com/#/basic/Meteor-isClient

Answer 2

这将在服务器端编译：

    if(typeof Audio != "undefined") {
      // Browser-only code
    }

Answer 3

在带有钩子的 ReactJS 中，您还可以使用音频表达式（HTMLElements）：

const [audio] = useState(typeof Audio !== "undefined" && new Audio(URL));
audio.play()

希望我能以某种方式提供帮助:)

Answer 4

如果您尝试在 Node.js 后端（本地服务器）中运行此音频对象，您将收到此错误，因为 Node.js 不支持音频 API，但您的浏览器支持。这样您就可以在浏览器上运行代码了。