0

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?

Improve this question
6
  • Please limit yourself to one question per question. this.sound is standard object-oriented programming with JavaScript. See stackoverflow.com/questions/3127429/…. Commented May 26, 2020 at 14:39
  • For setting the volume, see How to set volume of audio object? Commented May 26, 2020 at 14:40
  • 1
    For looping the audio, see Loop audio with JavaScript Commented May 26, 2020 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. Commented May 27, 2020 at 6: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? Commented May 27, 2020 at 14:32

1 Answer 1

Reset to default
0

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)

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

2 Comments

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 for more info. Otherwise a great answer, so please continue answering (previously unasked) questions!
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?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.