title: I want to build function that stops the playing song when I press the button to start another one
body: <p>I've made it so you can give the function a variable which decides which song is going to be played (this code is used for multiple buttons which redirect to multiple songs).</p>
  
  <p>The problem is, if I press one button and then another afterwards - two songs are playing at the same time. The question now is how do I implement that all the songs are paused before the selected one is played.</p>
  
  <p>I thought of creating an array via jQuery and applying .stop to the array but that doesn't seem to work.</p>
  
  <p>Code:</p>
  
  <pre><code>function aud_play_pause(n) {
      var myAudio = document.getElementById("Audio" + n);
      var taskArray = new Array();
  
      $('audio[id^="Audio"]').each(function() {
         taskArray.push($(this).val());
      });
  
      if (myAudio.paused) {
          taskArray.pause();
          myAudio.play();
      } else {
          myAudio.pause();
      }
  }
  </code></pre>
  
  <p>Here's my snippet :</p>
  
  <p>(the mp3 files are not included - that's why it throws an error it works though, I prom :D)</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>function aud_play_pause(n) {
    var myAudio = document.getElementById("Audio" + n);
    var taskArray = new Array();
  
    $('audio[id^="Audio"]').each(function() {
      taskArray.push($(this).val());
    });
  
    if (myAudio.paused) {
      taskArray.pause();
      myAudio.play();
    } else {
      myAudio.pause();
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Open+Sans);
   .btn {
    font-family: 'Open Sans';
    background-color: #4a4a4a;
    display: inline-block;
    border-radius: 42px;
    cursor: pointer;
    color: #ffffff;
    margin: 5px;
    font-size: 17px;
    font-weight: 3px;
    height: 3em;
    width: 22em;
    text-decoration: none;
    border: 0;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .btn:hover,
  .btn:focus,
  .btn:active {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    background-color: #CF4647;
    outline: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Handy Page&lt;/title&gt;
    &lt;link rel="icon" href="DragOn.ico"&gt;
    &lt;link rel="stylesheet" href="stylesheet.css"&gt;
    &lt;script type="text/javascript" src="code.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body bgcolor=#000000&gt;
    &lt;button class="btn" type="button" onclick="aud_play_pause(1)"&gt;Delax&lt;/button&gt;
    &lt;button class="btn" type="button" onclick="aud_play_pause(2)"&gt;Daft Punk&lt;/button&gt;
    &lt;button class="btn" type="button" onclick="aud_play_pause(3)"&gt;8-bit&lt;/button&gt;
    &lt;button class="btn" type="button" onclick="aud_play_pause(4)"&gt;Godwolf&lt;/button&gt;
    &lt;button class="btn" type="button" onclick="aud_play_pause(5)"&gt;Bounce&lt;/button&gt;
    &lt;audio class="music" id="Audio5" src="Orkestrated and Fries &amp; Shine ft. Big Nab - Melbourne Bounce (Deorro Remix).mp3" type="audio/mp3"&gt;
      Your browser does not support the HTML5 Audio element.
    &lt;/audio&gt;
    &lt;audio class="music" id="Audio4" src="Godwolf - Love Is A Battlefield.mp3" type="audio/mp3"&gt;
      Your browser does not support the HTML5 Audio element.
    &lt;/audio&gt;
    &lt;audio class="music" id="Audio3" src="unreal superheroe.mp3" type="audio/mp3"&gt;
      Your browser does not support the HTML5 Audio element.
    &lt;/audio&gt;
    &lt;audio class="music" id="Audio2" src="Daft Punk - Harder Better Faster Stronger RMX.mp3" type="audio/mp3"&gt;
      Your browser does not support the HTML5 Audio element.
    &lt;/audio&gt;
    &lt;audio id="Audio1" source src="Delax - Drop You Like.mp3" type="audio/mp3"&gt;
      Your browser does not support the HTML5 Audio element.
    &lt;/audio&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm extremely new to coding (since yesterday).</p>
  
  <p>So either the answer is so obvious that no one would dare to ask it or just nobody has asked it yet (because I couldn't find anything on the internet).</p>
  
  <p>Thanks in advance !</p>