Chrome: Uncaught (in promise) DOMException: The element has no supported sources

JavaScript
#1

Am I supposed to be adding this in, if so, how?

streamType="mp3"

Code: https://jsfiddle.net/nLrskx06/

 <audio></audio>

<div class="container-left">
            <div class="playButton wrapa" data-audio="http://hi5.1980s.fm/;">


(function iife() {
   "use strict";

   function show(el) {
      el.classList.remove("hide");
   }

   function hide(el) {
      el.classList.add("hide");
   }

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

   function hideAllButtons(button) {
      const buttons = button.querySelectorAll(".play, .pause, .speaker");
      for (let i = 0; i < buttons.length; i++) {
         hide(buttons[i]);
      }
   }

   function getPlay(button) {
      return button.querySelector(".play");
   }

   function getPause(button) {
      return button.querySelector(".pause");
   }

   function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
   }

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

   function pauseAllButtons() {
      let buttons = document.querySelectorAll(".playButton");
      for (let i = 0; i < buttons.length; i++) {
         if (isPlaying(buttons[i])) {
            showPlayButton(buttons[i]);
         }
      }
   }

   function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
      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 togglePlayButton(button) {
      const player = getAudio();
      const playing = isPlaying(button);
      showButton(button, {
         playing
      });
      manageAudio(player, {
         src: button.getAttribute("data-audio"),
         playing
      });
   }

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

   function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
   }
   initButton(".wrapa");
}());
#2

I tried this:

<div class="playButton wrapa" data-audio="http://hi5.1980s.fm/;" streamType="mp3" >

Code: https://jsfiddle.net/2opadf4b/1/

Did not work.

I tried this way: I couldn’t get it working.

<div class="playButton wrapa" stream="http://162.213.197.50/;" streamType="mp3" >

Code: https://jsfiddle.net/2opadf4b/2/

How do I get this working? What is missing?

What do I need to add for it to work?

#3

No your issue is that you are linking to a weird URL that isn’t actually a sound file? So I replaced the link to an actual MP3 file and it works fine. You can see it here. Notice how I only change the URL.

The error in question typically pops up if the URL is invalid or is blocked by CORS. Since the URL didn’t look like an actual sound file, I can only guess your URL is not one that will work as you intend it to.

Check out my edit of your code here…

https://jsfiddle.net/s1ej389b/

Good luck! :slight_smile:

#4

The code works fine here:

Stream: https://onlineradiobox.com/us/1980sfm/

<button id="set_radio_button" style="display: none;" played="1" class="b-play station_play" aria-label="Listen live" title="Listen to radio" stream="http://162.213.197.50/;" streamType="mp3" radioId="us.1980sfm" radioImg="//us0-cdn.onlineradiobox.com/img/l/8/13928.v1.png" radioName="1980s.FM"></button>

How would I get it to work in my code?

Code: https://jsfiddle.net/nLrskx06/

That stream uses this:

stream="http://162.213.197.50/;" streamType="mp3"

My code uses this:

 <audio></audio>

<div class="container-left">
            <div class="playButton wrapa" data-audio="http://hi5.1980s.fm/;">

How would I adjust my code so that it works?

I’m thinking, This: streamType="mp3" has to go somewhere in my code.

Is there a solution to get this working?

I’m confused here, not quite sure how I would get it to work.

Hoping someone on here will be able to figure this out because I’m stumped.