title: how to make play/stop button for 2 radio stream on the same page?
body: <p>I made 2 buttons for my radio streams, each one act like a PLAY/STOP button. </p>
  
  <ol>
  <li>play/stop for stream 1 (shoutcast or icecast)</li>
  <li>play/stop for stream 2 (shoutcast or icecast)</li>
  </ol>
  
  <p>This is what i did, hen you press on both buttons, only 1 stream (funk) is played, the second one is not playing at all (disco)</p>
  
  <p>can you help me please?
  thank you
  Tony</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var player1 = document.querySelector('audio');
  var player2 = document.querySelector('audio');
  var playBtn1 = document.querySelector('#play-btn_funk');
  var playBtn2 = document.querySelector('#play-btn_disco');
  
  
  playBtn1.addEventListener('click', function() {
   if ( player1.paused ) {
    player1.play();
    playBtn1.src = 'img/stop_funk.png';
   } else {
    player1.pause();
    playBtn1.src = 'img/play_funk.png';
   }
  });
  
  playBtn2.addEventListener('click', function() {
   if ( player2.paused ) {
    player2.play();
    playBtn2.src = 'img/stop_disco.png';
   } else {
    player2.pause();
    playBtn2.src = 'img/play_disco.png';
   }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   font-family:monospace;
   margin:0;
   line-height:1.45;
  }
  
  * {
   box-sizing:border-box;
  }
  
  #container_funk {
      float: left;
   width: 100px;
   margin:0 auto;
   padding: 1em;
   margin-top:5px;
  }
  
  #play-btn_funk {
   width:100px;
   cursor: pointer;
   display:inline-block;
  }
  
  #container_disco {
   position:relative;
      float:left;
   width: 100px;
   margin:0 auto;
   padding: 1em;
   margin-top:5px;
  }
  
  #play-btn_disco {
   width:100px;
   cursor: pointer;
   display:inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;title&gt;HTML5 Audio Player&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="container_funk"&gt;
    &lt;audio id="funk"&gt;
    &lt;source type="audio/mpeg" src="http://163.172.29.170:8000/;"/&gt;
    &lt;/audio&gt;
    &lt;img id="play-btn_funk" src="img/play_funk.png" /&gt;
    &lt;/div&gt;
  &lt;div id="container_disco"&gt;
    &lt;audio id="disco"&gt;
    &lt;source type="audio/mpeg" src="http://163.172.29.170:8080/;"/&gt;
   &lt;/audio&gt;
   &lt;img id="play-btn_disco" src="img/play_disco.png" /&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/audio.js"&gt;&lt;/script&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>