Prevent clicking on the black border

[asasass]

Clicking on the black border turns it on.

The button part is the middle part I believe.

What would be changed in the code to have only the middle part be clickable?

Multiple buttons.
https://jsfiddle.net/a9we6u8g/

I was able to do it when there is only 1 button, but not when there are multiple buttons on the screen.

https://jsfiddle.net/gypw370q/

  const playButtons = document.querySelector(".button");
  playButtons.addEventListener("click", playButtonClickHandler);
}());

[asasass]

This worked:

It should have been using this all along.
https://jsfiddle.net/eb4695fs/

  const playButtons = document.querySelectorAll(".button");
  playButtons.forEach(function addHandler(el) {
    el.addEventListener("click", playButtonClickHandler);
  });
}());

Removing dead code:

jslint is happy with this:

https://jsfiddle.net/4jLoqx7v/

(function iife() {
    "use strict";

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function getPlay(button) {
        return button;
    }

    function showPlayButton(button) {
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("active");
    }

    function pauseAllButtons() {
        var buttons = document.querySelectorAll(".playButton");
        buttons.forEach(function hidePause(buttons) {
            if (isPlaying(buttons)) {
                showPlayButton(buttons);
            }
        });
    }

    function showPauseButton(button) {
        pauseAllButtons();
        button.classList.add("active");
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function playButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            playing,
            src: button.getAttribute("data-audio")
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        playButton(button);
    }

    const playButtons = document.querySelectorAll(".button");
    playButtons.forEach(function addHandler(el) {
        el.addEventListener("click", playButtonClickHandler);
    });
}());

For only one button on the screen
https://jsfiddle.net/u90m1aoq/

(function iife() {
    "use strict";

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function getPlay(button) {
        return button;
    }

    function showPlayButton(button) {
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("active");
    }

    function showPauseButton(button) {
        button.classList.add("active");
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function playButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            playing,
            src: button.getAttribute("data-audio")
        });
    }

    function playButtonClickHandler(evt) {
        const button = getButtonContainer(evt.target);
        playButton(button);
    }

    const playButtons = document.querySelector(".button");
    playButtons.addEventListener("click", playButtonClickHandler);
}());