Make Channel buttons more visible that you can see they are buttons. Combine with a design that looks more like an app.

[MaxWindt]

Update function:

function updateChannels(channels) {
  let channelsEle = document.querySelector("#channels ul");
  channelsEle.innerHTML = "";
  if (channels.length > 0) {
    clearInterval(getChannelsId);
    document.getElementById("nochannels").classList.add("hidden");
    channels.forEach((channel) => {
      let li = document.createElement("li");

      // Create the button for the channel
      let channelButton = document.createElement("a");
      channelButton.classList.add("mdl-button", "mdl-button--raised", "mdl-js-button", "mdl-js-ripple-effect");

      // Set the innerHTML and icon based on the channel name
      if (/live|original/i.test(channel)) {
        channelButton.innerHTML = '<i class="material-icons">record_voice_over</i> ' + channel;
      } else if (/translation|übersetzung/i.test(channel)) {
        channelButton.innerHTML = '<i class="material-icons">translate</i> ' + channel;
      } else {
        channelButton.innerHTML = channel; // Default case if it doesn't match known types
      }

      // Add event listener for the button
      channelButton.addEventListener("click", function() {
        channelClick({ target: { innerText: channel } });
      });

      // Append the button to the list item
      li.appendChild(channelButton);

      // Append the list item to the channel list
      channelsEle.appendChild(li);
    });
  }
}

And This:

audio.onplay = function () {
    playButton.innerHTML = '<i class="material-icons">pause</i>';
  };
  audio.onpause = function () {
    playButton.innerHTML = '<i class="material-icons">play_arrow</i>';
  };

  playButton.classList.remove("hidden");
  setTimeout(function () {
    if (audio.paused) {
      playButton.innerHTML = '<i class="material-icons">play_arrow</i>';
    }
  }, 500);