Passing arguments into setTimeout: one method does not work (JS)

Question

I'm studying how to pass arguments into a setTimeout (as advised here.) In the context of a while-loop which activates an HTML5 Audio element.

This works:

window.setTimeout(playTone, time, phrasePitches[x]);

Curiously, this does not work:

window.setTimeout(function(){
    playTone(phrasePitches[x]);
}, time);

In the console, the timeouts occur as scheduled, each displaying:

TypeError: Cannot set property 'currentTime' of null

So for some reason, the second method does not want to accept the array... any idea what's going on here?

EDIT... the full code:

function playTone(tone){
        var tone = document.getElementById(tone);
        tone.currentTime = 0;
        tone.play();
    };

var pitchSet = new Array ("C3","D3","E3","F3","G3","A3","B3","C4");

fyshuffle (pitchSet);  // The Fischer-Yater shuffle function
    var i = 0;
    var phrasePitches = new Array();
    while (i < 4) { 
        phrasePitches.push(pitchSet[i]);
        i++; 
    }

var x=0;
var time = 0;
while(x<4){
//  window.setTimeout(playTone, time, phrasePitches[x]);  // This works.
    window.setTimeout(function(){
        playTone(phrasePitches[x]);
    }, time);
    time += 2000;
    x++;        
}

I bet it has something to do with [**this problem**](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example). Can you post the code surrounding that definition of `setTimeout` (I'm only interessted in the loop if there is any). — ibrahim mahrir, Jun 12 '17 at 02:07
It seems has not a "currentTime" in your code. Is it in the function named PlayTone? Maybe you should show the code — 喝茶的螃蟹, Jun 12 '17 at 02:11
It's definitly the problem I mentioned in the above comment. — ibrahim mahrir, Jun 12 '17 at 03:00
When the timeouts execute their callbacks, `x` will be equal to the array's length, since `array[ array.length ]` is `undefined`, an error will be thrown if you try to access a property of `undefined`. — ibrahim mahrir, Jun 12 '17 at 03:05
My favorite answer from the duplicate link is [**this one**](https://stackoverflow.com/a/19324832/6647153): wrap the code inside the `while` loop in an Immediately Invoked Function Expression ... — ibrahim mahrir, Jun 12 '17 at 03:07
`while(x < 4) { setTimeout(function() { alert(x); }, time); x++; }` to get a glimpse of what is happening: All pop-ups will alert the same value (the length of the array). — ibrahim mahrir, Jun 12 '17 at 03:10
Thank you! This is a little more complex and I will need to think it through. But a big help! — drenl, Jun 12 '17 at 04:09
@GregoryTippett Use of an audiosprite would be a better alternative for your purposes. `setTimeout` shouldn't be used to extensively, it's an antiquated function that isn't an accurate way to reference time. Let me know if you're interested. — zer00ne, Jun 12 '17 at 16:54
@zer00ne Sure! That would be great. Do you have a link to a reference or a tutorial? My JS is pretty rusty, so I'm always hoping for beginner-friendly. — drenl, Jun 12 '17 at 17:47
@GregoryTippett I'll post some references in my answer, comeback in 30 min or so. :) — zer00ne, Jun 12 '17 at 17:53
@GregoryTippett Sorry I ate lunch first but it's ready for review now — zer00ne, Jun 12 '17 at 20:12

zer00ne · Accepted Answer · 2017-06-12T20:22:26.933

Audiosprites

This demo uses an audiosprite⁰. I used Audacity program to concatenate small MP3 files into one larger MP3 file✲. Then I took note on each fragment's start and end time in seconds. There are other ways to generate an audiosprite if the manual way seems arduous.

✲ I found MergeMP3 after creating the audiosprite, so I haven't tested it yet, but it looks far easier to use than Audacity.

Details are commented in demo and notes corresponding to references

Demo

// Reference the <audio>
var fx = document.querySelector('#fx');

/* Reference the <fieldset> (can be any element with an
|| endtag: <tag></tag>
*/
var panel = document.querySelector('#panel');

/* Map the audiosprite's frags in an object of arrays 
|| Each array represents a frag which consists of: 
|| 'key': [start time, end time]¹
|| TODO: replace object literal with ES6 Map²
*/
var sprite = {
  'all': [0, 27],
  'click': [0, .45],
  'bell': [.65, 7.4],
  'elevator': [7.5, 9.7],
  'sonar': [10, 27]
};

// Declare default value of end time
var end = 0;

// Register the <audio> on the loadeddata event³...
fx.addEventListener('loadeddata', function(e) {

  /* Object.keys chained to .forEach()⁴ iterates through
  || 'sprite' properties (key/value pairs).
  */
  Object.keys(sprite).forEach(function(key, index) {

    /* On each iteration, generate a <button> inside the
    || <fieldset>
    || Note the use of a template literal⁵
    || TODO: Delegate⁶ click events to panel to avoid
    || inline attribute event handlers 
    */
    panel.innerHTML += `<button onclick="effect('${key}')">${key}</button>`;
  });
}, false);

// Register the <audio> on timeupdate event⁷...
fx.addEventListener('timeupdate', function(e) {

  /* timeupdate occurs when playing position changes
  || check if the currentTime⁸ property of <audio> 
  || is more than the value of 'end' 
  || ('end' is the second value of a frag: sprite[key][1])
  || If it is, pause the <audio>
  */
  if (fx.currentTime > end) {
    fx.pause();
  }
}, false);

/* This function passes the string value of 'key' 
|| in sprite object
|| Each 'key' has a value of an array containing an start
|| time and an end time. 
|| In short, 'key' is a reference to a frag.
*/
function effect(key) {

  // if the 'key' in 'sprite' object exists...
  if (sprite[key]) {

    /* The currentTime of <audio> is 
    || the first value of 'key' 
    */
    fx.currentTime = sprite[key][0];

    // Assign 'end' the second value of 'key' 
    end = sprite[key][1];

    /* Play <audio>
    || Note at this point, if done conventionally by
    || reloading the .src for each change to a separate
    || frag, fx.load() would need to be invoked
   || as well, thereby incurring another HTTP request
   */
    fx.play();
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <style>

  </style>
</head>

<body>
  <section>
    <!-- 
An audiosprite⁰ is an audio file that is actually a
concatenation of multiple sound files 
(from now on refered to as frags) played at 
different times throughout its duration. 

The advantages are that:
- the file is downloaded once then cached
- the src doesn't change thus only one HTTP request needed

If done the conventional way with multiple frags there 
would be:
- several downloads for smaller files 
- the added HTTP request everytime the src attribute changes
  its url
-->
    <audio id='fx' src='http://vocaroo.com/media_command.php?media=s0L5VMshEG3E&command=download_mp3' controls></audio>
    <fieldset id='panel'>
      <legend>Effects</legend>
    </fieldset>
  </section>
  <!-- 
If using JS on the same page rather than externally,
place the JS here within a <script> block:
<script>
...:::JS code here:::...
</script>
-->

</body>

</html>

References

⁰ audiosprite

¹ key/value pairs

² ES6 Map ✎

³ loadeddata event

⁴ Object.keys().forEach()

⁵ template literal

⁶ Event Delegation ✎

⁷ timeupdate event

⁸ currentTime

✎ Mentioned as TODO, it has not been implemented in this demo.

@zerOOne ... nice! that's amazing, thank you! I will definitely be using this concept down the road. A great tutorial you've put together here, you should blog it out somewhere :) — drenl, Jun 12 '17 at 22:50
@GregoryTippett thank you, sir. Don't forget to accept this answer if it resolved your problem by clicking the ✔. Happy coding. — zer00ne, Jun 12 '17 at 22:53

Passing arguments into setTimeout: one method does not work (JS)

1 Answers1

Audiosprites

Demo

References