Making JQuery function Plain JS

Question

Hey I have the following function which works great in JQuery, but for many reasons I require it in plain JS.

$('audio').on("play pause ended", function () {
    document.title = document.title.replace("\u25B6", "")
    $("audio").each(function (index) {
        if (!this.paused) {
            document.title = "\u25B6 " + document.title.replace("\u25B6 ", "")
            return false;
        }
    })
});

I've attempted to convert it to plain JS (see below) however it's just coming up with the following error: TypeError: undefined is not a function (evaluating 'sound.addEventListener')

var sound = document.getElementsByTagName('audio');
sound.addEventListener('play pause ended', function () {
    document.title = document.title.replace('\u25B6', '')
    sound.each(function (index) {
        if (!this.paused) {
            document.title = '\u25B6 ' + document.title.replace('\u25B6 ', '')
            return false;
        }
    })
});

Answer 1

The following should do the trick:

var sounds = document.getElementsByTagName('audio');
/* Loop through the nodelist - this is **not** an array */
for(var i = 0; i < sounds.length; i++){
    /* Get the item in your nodelist. This **is** an element. */
    var sound = sounds.item(i);
    /* Now add your event listener here - You can only add one at a 
     * time, though. So I decided to make the event a separate  
     * function and attach it multiple timers. */
    function eventHandler(){
        document.title = document.title.replace('\u25B6', '')
        if (!sound.paused) {
            document.title = '\u25B6 ' + document.title.replace('\u25B6 ', '')
            return false;
        }
    }
    sound.addEventListener('play', eventHandler, false);
    sound.addEventListener('pause', eventHandler, false);
    sound.addEventListener('ended', eventHandler, false);
}

Two things: document.getElementsByTagName returns an HTMLNodeList which is not an array. It can be looped through because it has a length property, but it cannot use the forEach(since it also has a function called item, which is used to get the element at the provided index of the nodelist).

Secondly, this does not refer to your item in a forEach, you need to pass a parameter to your forEach function that you can reference (aka array.forEach(function(item){}); where your item would be referenced by item). But like I said, that won't make a difference here as a nodeList is not an array.

Updated

It just came to me that there is a simple way to attach all events, so I amended it appropriately.