1

I had a previous question 2 audio sounds and I want to play one HTML5 audio element at a time, which was answered. However, I have 2 more questions:

1) need help interpreting it: What does null from .bind(null,audios[i[) mean? I researched null but still confuse.

External JS:

var audios = document.getElementsByTagName('audio');
for(var i=0; i<audios.length;i++) {
   audios[i].onplay = pauseAllAudios.bind(null, audios[i]);
}

function pauseAllAudios(audio){
   for(var i=0; i<audios.length;i++)
        if(audios[i]!=audio) {
         } audios[i].pause(); 
     }   
};

2) When I put this in the Html page:

<script type="text/javascript" src="js/audio.js"></script>

before </head> section, the javascript does not work. If I put it before </body> section,

the javascript works. Shouldn't javascript work in both areas?

Community
  • 1
  • 1
user5117220
  • 89
  • 3
  • 12
  • You need to understand two concepts, DOM ready event for DOM manipulation and `bind` and `apply` methods API – vinayakj Jul 19 '15 at 18:40

2 Answers2

0

  1. The .bind() function gives you back another function that, when invoked, will use the first argument passed to .bind() as the value of this. Your pauseAllAudios() function does not make use of this, so passing null just makes this be null. Really, it could have been anything, but null is a nice readable marker that means "my function has no need for this to be bound to anything".

  2. The code works when it's at the end of the body because browsers run code as they encounter it, while building the DOM. When the script is in the head section, the portion of the DOM containing your audio elements doesn't exist yet. When it's at the end of the body, the DOM is (almost) complete.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 1) I am a beginner in JavaScript. Still a little confuse on null. What is "this"? 2) So in order to be in the head section I would probably have to add window.onload = function () { code } ? – user5117220 Jul 19 '15 at 21:12
  • @user5117220 well `this` is a reserved symbol in JavaScript. [Here is a slightly old question with some good information.](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) Understanding `this` is important. As to your second question, yes, using an "onload" handler would let you put the script in the ``, but there's nothing wrong with putting it at the end of the ``. – Pointy Jul 20 '15 at 00:17
  • I appreciate your patience, So does "this" case refer to window Object? I guess I am confuse if null is a place holder, I don't get why I can't do this: audios[i].onplay = pauseAllAudios.bind(audios[i]); However if I do that, nothing plays. So I understand that I need it, but confuse on why I need it. Is null a parameter or an argument? – user5117220 Jul 20 '15 at 02:54
  • @user5117220 the value of `this` is determined by the way the function is invoked. In this case, the function involved doesn't mention `this` at all, so it really doesn't matter what the value of it is. That's why the code passes `null`. The `.bind()` function **always** assumes that the first argument is the value to be used for `this`, so if you don't have some placeholder value there, it won't work. – Pointy Jul 20 '15 at 03:56
  • When you mentioned invoked, are you referring to "call"? Silly question: Just curious if the function pauseAllAudios mentioned "this", "this" would refer to the pauseAllAudios function, correct? Just to confirm, since there is no "this" then I need a value placeholder, for example "null" otherwise it result in errors. I was confuse when I was originally looking at: http://www.w3schools.com/jquery/event_bind.asp $(selector).bind(event,data,function,map) So when I look at this, I was confuse about it. – user5117220 Jul 20 '15 at 17:30
  • No, `this` would almost never refer to the called function (it's not impossible, but quite unusual). The most common situation of a function using `this` is a function that expects to be used as a "member function", a function call via a property reference on an object. In that case, `this` would carry a reference to the object by which the function was called. – Pointy Jul 20 '15 at 17:35
  • I will try to find some more examples of "this" Thank you for your help, I really appreciate it. – user5117220 Jul 20 '15 at 17:49
  • Just curious, if I want to add javascript file in the section, I added this: window.onload = function () { audios.onplay = pauseAllAudios; } However it did not work. Why is that? – user5117220 Jul 22 '15 at 20:47
  • @user5117220 Try putting all the code you posted in your question here inside the "load" handler. But note that there's really nothing wrong with putting your script in the ``, and lots of people actually consider that the *best* place to put scripts (when possible). – Pointy Jul 22 '15 at 21:06
  • So you can't call the function in the window.onload ? – user5117220 Jul 22 '15 at 21:33
  • Yes, you can, but you have to do it the way you did it in the code here in this question. Specifically, you can't refer to `onplay` on the `audios` value because it's a **list** of elements. – Pointy Jul 22 '15 at 21:36
  • How come this doesn't work: window.onload = function() { audios.addEventListener("click", pauseAllAudios); } – user5117220 Jul 24 '15 at 00:56
0

For the 2nd question, maybe there is another javascript file required by js/audio.js and then when you put it in the head it is before the needed file, so it can't works, and when you put it in before the </body> it is loaded after the needed js file and then works

godidier
  • 923
  • 16
  • 34