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

How do I get this working? What is missing?

What do I need to add for it to work?

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");
}());

I think it just won’t work when the page is using https but the stream link is not. Your code works for me locally using http.

Edit:

Just in case. Here is an 80s station link that works. It’s German so I’m not sure if they also play German songs (when I test it, it was playing Prince).

https://stream.antenne.de/80er-kulthits?icy=https

The code works fine here:

Music Stream : 1980s.FM Listen Live - Richmond, United States | Online Radio Box

<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?

Look at the window it opens. The player is in an http window. It’s the same on their own web site.

If you search for the station you can also see sites that are running https and fail to play the station. Here is a site that visibly switches to http from https to get it to play.

How would I get it to play with my code?

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

Is there a solution to get this working?

I’m thinking if am able to add this code in, it will work.

streamType="mp3"

You can’t. It’s for the same reason that an image using http will not load on jsfiddle.

<img src="http://1980s.fm/images/logos/1980s_logo-200x200.png" alt="">

I doubt there is any way you can force jsfiddle to open using a http connection. I’m sure they just redirect everything to https. If this was on a server you controlled however you would.

Here is another example. The shoutcast directory listing.

The https version. A lot of stations will fail to play. If the station does play you can use it on jsfiddle.
https://directory.shoutcast.com

The http version, most should play but you can’t use them on jsfiddle
http://directory.shoutcast.com


Why don’t you just use a station link that works?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.