JavaScript defining variable issue

Question

I am attempting to declare a new audio element in JavaScript. This is what I have written.

//Creating audio object
var audio = document.createElement("AUDIO");
audio.src = '/beats/vibe/lofi2.wav';
audio.controls = true;
audio.loop = false;
audio.autoplay = false;

I am receiving the following error: 'document' is not definded [no-undef]

Any clues as to why this wont work? Thanks!

where and when do you get this error ? looks like a linting error, not a browser error — klugjo
– klugjo, Commented Dec 26, 2017 at 7:25
That sounds like an eslint error. You'll need to tell it you're writing for web (if that's what you're doing) — xavdid
– xavdid, Commented Dec 26, 2017 at 7:26
It is an eslint error, and yes I am developing for web. Sorry wasn't aware that changed anything. Neither of the below solutions fixed it for me. Thanks! — Caleb Smith
– Caleb Smith, Commented Dec 26, 2017 at 17:58

Ankit Agarwal · Accepted Answer · 2017-12-26 07:28:59Z

0

Try using window.document. Replace

var audio = document.createElement("AUDIO");

with

var audio = window.document.createElement("AUDIO");

Or in some cases we can also include /*global document require*/ on top of the script files. This will ensure that document is available for the script.

answered Dec 26, 2017 at 7:28

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Caleb Smith Over a year ago

This just moved the error to window. How would I implement that second solution?

zer00ne · Accepted Answer · 2017-12-26 07:53:44Z

0

The object must be inserted into DOM. After crafting your audio tag, use:

document.body.appendChild(audio);

Demo

var audio = document.createElement("AUDIO");
audio.src = 'https://vocaroo.com/media_command.php?media=s1XsCD8OHZPI&command=download_mp3'
audio.controls = true;
audio.loop = false;
audio.autoplay = false;
document.body.appendChild(audio);

answered Dec 26, 2017 at 7:53

zer00ne

45.3k6 gold badges50 silver badges82 bronze badges

5 Comments

Caleb Smith Over a year ago

Is there a way to do this with an external JavaScript file?

zer00ne Over a year ago

@CalebSmith Yes, sir

zer00ne Over a year ago

@CalebSmith { "env": { "browser": true } } in your .eslintrc file. Refer to this post

Caleb Smith Over a year ago

Would I just add the .eslintrc file to the folder? Do I need to reference it in any way in my HTML or JavaScript file?

zer00ne Over a year ago

No problem, sir. To summarize, it was an eslint problem but keep in mind that your code will run in a browser (as long as you add the tag to DOM ex.document.body.appendChild(audio);)

Collectives™ on Stack Overflow

JavaScript defining variable issue

2 Answers 2

1 Comment

Demo

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Demo

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related