How to add sound to HTML using Javascript?

Question

I used the following code to add sound to my HTML document.

function sound(src) {
    this.sound = document.createElement("audio");
    this.sound.src = src;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none");
    this.sound.style.display = "none";
    document.body.appendChild(this.sound);
    this.play = function(){
      this.sound.play();
    }
    this.stop = function(){
      this.sound.pause();
    }
}
var bite = new sound("Bite+2.mp3");
var slurp = new sound("Slurp+4.mp3");
var hiss = new sound("snakehiss2.mp3");
var bg = new sound("gameSound.mp3");

Now, I want to set the volume of 'bg' and make its loop = true I can't figure out a way to do this. Please help!!
Also, I saw the code somewhere on the net, and I can't understand how 'this.sound' is working. Please explain
Edit:
Turns out, I only needed to do bg.sound.volume = 0.5 to do that. Similarly, bg.sound.loop = true.
I also understand the use of 'this', but why is 'sound' required? Wouldn't this.src suffice instead of this.sound.src?

Please limit yourself to one question per question. `this.sound` is standard object-oriented programming with JavaScript. See https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work. — Heretic Monkey, May 26 '20 at 14:39
For setting the volume, see [How to set volume of audio object?](https://stackoverflow.com/q/37115491/215552) — Heretic Monkey, May 26 '20 at 14:40
For looping the audio, see [Loop audio with JavaScript](https://stackoverflow.com/q/13610638/215552) — Heretic Monkey, May 26 '20 at 14:41
@HereticMonkey I did read those questions, but I wanted to know how to do that with the way I have implemented it. Also, I understand 'this', but I don't understand the use of 'sound' with 'this' in 'this.sound'. I thought it was better to ask the questions in one only instead of copying the code to make a separate question, but if that's the way things are done here, I will take care of it from the next time. — Amartya, May 27 '20 at 06:30
`this.sound` refers to the `audio` element created in the first line of `sound`. Setting `this.src` wouldn't set the `src` property of the `audio` element, defeating the purpose... You've confused yourself by naming the wrapping function/object the same as the internal property name. If you called it `this.audio`, and left the outer function `sound` perhaps it would make more sense? — Heretic Monkey, May 27 '20 at 14:32
@HereticMonkey Yeah, I get it now. As I said, this was not written by me, I picked it up from somewhere on the net. **Just one more thing, why exactly is `this = document.createElement("audio")` illegal?** — Amartya, May 28 '20 at 18:47

score 0 · Answer 1 · answered May 26 '20 at 15:04

I am new to stackoverflow, but here is my guess

first declare the global variable

let siteSound;

Then declare the function as you did

function createSound(src) { //src stands for source
  this.sound = document.createElement("audio");
  this.sound.src = src;
  this.sound.setAttribute("preload", "auto");
  this.sound.setAttribute("controls", "none");
  this.sound.style.display = "none";
  document.body.appendChild(this.sound);
  this.play = function(){
    this.sound.play();
  }
  this.stop = function(){
    this.sound.pause();
  }
}

Then create a function that initiates the sound

function startSound(dirToSound){
   siteSound = new createSound();
   siteSound.play();
}

As you can see, we declare variable siteSound as new createSound(), and in that createSound() method 'this' refers to the variable that caused the method, in our cause it's siteSound. (this.sound will stand for siteSound.sound, this.sound.src for siteSound.sound.src, etc)

As there are restrictions on how sites can play music (user has to do something on the page first, for example click), i suppose you use some sort of event to create the music, for example add event listener 'onclick' for the mouse, and call the function startSound:

someHTMLElement.domElement.addEventListener('onclick', startSound(dirToSound), false);

When you click on someHTMLElement, startSound(dirToSound) should be called and music should start playing.

If you want to loop, add this.loop = true to the method createSound(src)(i am not sure in case of html, but this works in other places, you have to test)

If you want to adjust loudness to 50%, try adding this.volume = 0.5 to createSound(src) function (a number from 0 to 1)

I appreciate you're trying to help the OP, but whenever you see comments starting with "Does this answer your question?" it generally means that there are other questions on the site that answer the question already (in this case, two of them as there are two questions [well, 3] asked). See [the help center](https://stackoverflow.com/help/duplicates) for more info. Otherwise a great answer, so please continue answering (previously unasked) questions! — Heretic Monkey, May 26 '20 at 15:25
But that way, loop = true will be universal. I want it to be in only selected sounds. I found a way for that, **bg.sound.loop=true**. Also, I understand your explanation of this, but why is **this.sound.src** etc. required? Why wouldn't this.src suffice? — Amartya, May 27 '20 at 06:16

How to add sound to HTML using Javascript?

1 Answers1