Getting audio players to play their respective streams out of their element

JavaScript
1

Currently, even though both players are attached to different streams, they both play one stream, the same exact stream.

How would I adjust this code so they both can recognize each of their streams out of their element?

I’ve been trying to figure out how to do this.

They both use each of these to get the stream

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

 function togglePlayButton(button) {
   var player = getAudio();

 .playButton {
   position: relative;
   width: 600px;
   height: 44px;
   cursor: pointer;
   border: 3px solid #0059dd;
   background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
 }
 
 .playButton.active {
   background: linear-gradient(to right, #00ffff 0, #00ffff 198px, #0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
 }
 
 .play,
 .pause {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   cursor: pointer;
 }
 
 .hide {
   display: none;
 }
 
 .jugarBoton {
   position: relative;
   width: 600px;
   height: 44px;
   cursor: pointer;
   border: 3px solid #0059dd;
   background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
 }
 
 .jugarBoton.active {
   background: linear-gradient(to right, #00ffff 0, #00ffff 198px, #0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
 }
 
 .jugar,
 .pausar {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   cursor: pointer;
 }
 
 .esconder {
   display: none;
 }


<div class="playButton ">
  <svg class="play" width="39" height="40" viewbox="5 8 50 56">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
    <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z"></path>
  </svg>

  <svg class="pause hide" width="39" height="40" viewbox="0 -3.4 24 24">
    <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63"></path>
    <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
    <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
    <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
    <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
    <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
  </svg>

  <audio preload="none">
    <source src="http://hi5.1980s.fm/;" type="audio/mpeg">

  </audio>
</div>

<div class="jugarBoton ">
  <svg class="jugar" width="39" height="40" viewbox="5 8 50 56">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
    <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z"></path>
  </svg>

  <svg class="pausar esconder" width="39" height="40" viewbox="0 -3.4 24 24">
    <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63"></path>
    <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
    <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
    <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
    <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
    <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
  </svg>

  <audio preload="none">
    <source src="http://s5.onweb.gr:8488/;" type="audio/mpeg">

  </audio>
</div>


 (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 getPlay(button) {
     return button.querySelector(".play");
   }

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


   function showPlayButton(button) {
     var play = getPlay(button);
     var pause = getPause(button);
     button.classList.remove("active");
     show(play);
     hide(pause);
   }

   function showPauseButton(button) {
     var play = getPlay(button);
     var pause = getPause(button);
     button.classList.add("active");
     hide(play);
     show(pause);
   }

   function pauseAllButtons() {
     var buttons = document.querySelectorAll("playButton");
     buttons.forEach(showPauseButton);
   }

   function isPlaying(audio) {
     return audio.paused === false;
   }

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

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

   function playAudio(player) {
     player.volume = 1.0;
     player.play();
   }

   function togglePlayButton(button) {
     var player = getAudio();
     pauseAllButtons();
     if (isPlaying(player)) {
       showPlayButton(button);
       pauseAudio(player);
     } else {
       showPauseButton(button);
       playAudio(player);
     }
   }

   function playButtonClickHandler(evt) {
     var button = getButtonContainer(evt.target);
     togglePlayButton(button);
   }
   var playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", playButtonClickHandler);
 }());


 (function iife() {
   "use strict";

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

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

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


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

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


   function showPlayButton(button) {
     var play = getPlay(button);
     var pause = getPause(button);
     button.classList.remove("active");
     show(play);
     hide(pause);
   }

   function showPauseButton(button) {
     var play = getPlay(button);
     var pause = getPause(button);
     button.classList.add("active");
     hide(play);
     show(pause);
   }

   function pauseAllButtons() {
     var buttons = document.querySelectorAll("playButton2");
     buttons.forEach(showPauseButton);
   }

   function isPlaying(audio) {
     return audio.paused === false;
   }

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

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

   function playAudio(player) {
     player.volume = 1.0;
     player.play();
   }

   function togglePlayButton(button) {
     var player = getAudio();
     pauseAllButtons();
     if (isPlaying(player)) {
       showPlayButton(button);
       pauseAudio(player);
     } else {
       showPauseButton(button);
       playAudio(player);
     }
   }

   function playButtonClickHandler(evt) {
     var button = getButtonContainer(evt.target);
     togglePlayButton(button);
   }
   var playButton = document.querySelector(".jugarBoton");
   playButton.addEventListener("click", playButtonClickHandler);
 }());
2

Would you recommend using an id as a good alternative?

  <audio id="radio1" preload="none">

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

  <audio id="radio2" preload="none">

   function getAudio() {
     return document.querySelector("#radio2");
   }
3

Can I see an example of how this would be done, and would you recommend against doing this, and why?

Can I place the audio stream inside the javascript, outside it’s element?
or even inside it’s element?

Something like this,

function togglePlayButton(button) {
       var player = button.querySelector("audio");    
        var audio = new Audio("http://hi5.1980s.fm/;");

but with
var audio = new Audio("http://hi5.1980s.fm/;");

inside it’s own function?


var audio = document.createElement('audio');
audio.src = "http://hi5.1980s.fm/;"


mySound = new Audio([URLString]);
4

I have a feeling, I shouldn’t be doing this at all, period.
And that it’s bad practice.

But why would it be bad?

I thought it would be better, cause then you would remove it from the html part.

I just did it here, but how do I fix it?

Placing the url, inside the javascript.

Or we can work off the new code:

or like this?

     var player = document.createElement("audio");
player.src = "http://hi5.1980s.fm/;"

https://jsfiddle.net/c36ojqb7/13/

5

I am curious about something. If I were to put 3 id’s on 3 radios on one player, how exactly would that work?

Can you show me how I would do this?

I tried this:

That didn’t work.

     function getAudio() {
     return document.querySelector("#radio1");
      return document.querySelector("#radio2");
       return document.querySelector("#radio3");
   }


  function playButton(button) {
    var player = getAudio();

I tried this:

That didn’t work

     function getAudio1() {
     return document.querySelector("#radio1");

   }
   
        function getAudio2() {
     return document.querySelector("#radio2");

   }
   
        function getAudio3() {
       return document.querySelector("#radio3");
   }

  function playButton(button) {
    var player = getAudio1();
    var player = getAudio2();
    var player = getAudio3();
6

I believe that I’ve mentioned this several times now. You place a data-audio attribute on each playButton element, and when playing the audio you set the src attribute of the one and only single audio player to be that data-audio attribute.

Because setting the src results in the audio player restarting, you don’t want to do that when the same player has been paused and then played. So you first check if the data-audio is different from the audio src, and only if they are different do you set the src attribute of the audio player.

1 Like
7

And, how exactly would this be done?

If I were to put id’s on 3 radios, how would you set that up?

8

Why would you put ids on them? Those aren’t required at all.

9

I know, but it was something I was trying to figure out how to do.

10

Start off with each <audio> element on the page by copying the audio src value to the playButton element as a data-audio attribute.

11

data-audio="http://getradio.me/svoefm


    <audio id="radio1" preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg">

    </audio>
  </div>
12

You can now update the playAudio function. Before playing, set the src attribute of the audio player to that data-audio attribute from the button.

Be sure to always use the same audio player, which is best achieved using document.querySelector.

13

I don’t understand

14

I was asking you something different.

#5

I just want to know how that would be achieved.

15

We can break it down to separate pieces.

In the playAudio function, start off by creating a variable called src and assign to it button’s data-audio attribute.
Then, use document.querySelector to get the <audio> element, and set its src attribute to be that src variable.

16

That would be done with this code then:

17

You sound as if it shouldn’t be done to that code. Why do you feel that way?

18

I do think, I was trying to do two things at once, you wanted to do one.

We’ll do this one first then.

19

Using more than one audio element results in significant problems, especially when you have several of them such as eight of them on the same page.

Setting things up so that multiple play buttons all use the same audio element, is a good solution to those problems.

1 Like
20

Like this?

   function playAudio(player) {
     var src = data-audio 
     player.volume = 1.0;
     player.play();
     
   }