ReferenceError: audio is not defined

Question

I'm building an audio player in Meteor for a client.

I'm getting an error when I try to create an audio object. I'm using the following code. Any idea why this is happening? Any help would be greatly appreciated.

// 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

Trismus

Actually it was originally set as Audio() not audio() and that error was still there. – Trismus

Then edit your question, with the proper error message and the proper code. As it is, the only answer is that one. – Sapsucker

alright, changed it. Get the same error with Audio instead of "audio". – Trismus

Answer 1

I think there's a misconception here. You have the right code, but it's running in a different context.

In the case of Meteor, the NodeJS back-end is also running your 'client-side' code. NodeJS doesn't have support for the Audio API that you're using, sadly, but your browser does.

This code serving and running in both the client-side and server-side can get a bit confusing to know the lines between client + server, especially when Meteor tries to blur those lines!

I would look up Meteor's architecture so you can best structure your code to target the 'client-end' vs. 'back-end' environments. A great article is here: https://www.discovermeteor.com/blog/what-goes-where/

Basically, Meteor provides two directories that you can use to specifically target the client or server. You can place files in /client or /server and it will be handled for you.

For something quick or for a file that is used in both contexts, the Meteor docs explains a boolean flag called Meteor.isClient or Meteor.isServer that you can use to mark code to be ran only on the client-side / server-side: http://docs.meteor.com/#/basic/Meteor-isClient

Holladay

Cool. I wasn't aware the Meteor.isClient / isServer was necessary for all functions (mostly just used it with helpers and pub / sub before). Will definitely drop that in, then close the question if it works. – Trismus

Answer 2

This will compile on the server-side:

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

Churchy

Answer 3

In ReactJS with hooks, you can use also an expression for Audio(HTMLElements):

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

Hope I could help, somehow :)

Caesalpiniaceous

Super clean implementation! Here's the TS version I ended up using. const [audio] = React.useState<HTMLAudioElement | null>(typeof Audio !== 'undefined' ? new Audio(URL) : null) – Sudoriferous

Answer 4

If you are running this code in a Node.js environment, you won't have direct access to the HTML5 Audio API, which is a client-side feature available in web browsers. In a Node.js server, you typically don't have access to client-side features like audio playback.

If you want to work with audio files in a Node.js environment, you can use external libraries like "node-wav-player" or "node-speaker" for audio playback or "node-lame" for audio encoding and decoding. These libraries are designed for server-side audio processing.

Planchet

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Darcee

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Loria