Question 281750 in Html Question posted in
Some basic documentation can be found here.

HTML5 and JS audio doesn't play

So i’m working on a school project, and i have to create a website. In this website, i made a page when you click on a guitar image, it play/pause a music, and everything was working fine ! But then, when i copy-pasted the code for another guitar and sound,nothing is working anymore. I made sure to change id and sources, class and everything so nothing is duplicate but it’s not working
Here is a part of the html5 code

<h2>Van Halen</h2>
         <audio src="son/légendes/vanhalen.mp3" id="vanhalenaudio" preload="auto"></audio>
<p style="float:right"><img src="images/légendes/vanhalenguitar.png" id="clickable" onclick="vanhalenbutton()" /></p>
        <script type="text/javascript" src="javascript/légendes/son/vanhalen.js"></script>

<p style="float:left"><img src="images/légendes/vanhalen.png" /></p>
        <br><br><br><br> 
      <p>stuff</p>
        
        <br><br><br><br><br><br><br>
        
        <h2>Jimi Hendrix</h2>
         <audio src="son/légendes/jimihendrix.mp3" id="jimihendrixaudio" preload="auto"></audio>
<p style="float:right"><img src="images/légendes/jimihendrixguitare.png" id="clickable" onclick="jimihendrixbutton()" width="350" height="350"/></p>
        <script type="text/javascript" src="javascript/légendes/son/jimihendrix.js"></script>
        
<p style="float:left"><img src="images/légendes/jimihendrix.png" width="500" height="300"/></p>
       <p>other stuff</p>
        <br><br><br><br><br><br><br><br><br><br>

And here is the JS, same thing for both but i replaced the "vanhalen" with "jimihendrix"

var playing = false;
var audio = document.getElementById("ritchieblackmoreaudio");

function ritchieblackmorebutton() {
    playing ? audio.pause() : audio.play();
}

audio.onplaying = function() {
  playing = true;
};
audio.onpause = function() {
  playing = false;
};

I tryed to remove the other sound, and everything was working again, but when i put it back, it was not working. I don’t know what to do and i can’t find anything about this on internet.

Tags:

2

Answers


  1. 0

    If you intend to have a global variable like playing, you need to have one for each player (ex: jimiPlaying and vahHalenPlaying).

    Same for your global variable audio.

    But global variables for those things are not actually needed to accomplish what you want. You can target each player specifically, and set their "playing" status specifically.

    // buttons
const jimiBtn = document.getElementById("play_jimi");
const vhBtn = document.getElementById("play_vh");

// players
const jimiPlayer = document.getElementById("jimi");
const vhPlayer = document.getElementById("vanhalen");

//  event handlers
jimiBtn.addEventListener("click", () => {
    jimiPlayer.play();
    vhPlayer.pause();
});

vhBtn.addEventListener("click", () => {
    jimiPlayer.pause();
    vhPlayer.play();
});
    <audio controls id="jimi" src="https://ia804708.us.archive.org/13/items/jimi-hendrix-are-you-experienced_202301/Are%20You%20Experienced%2F02%20Manic%20Depression.mp3"></audio>
<audio controls id="vanhalen" src="https://ia904502.us.archive.org/22/items/van-halen-led-zeppelin/Van%20Halen%20%2B%20Led%20Zep%2F05%20Panama.mp3"></audio>

<hr />

<button id="play_jimi">play jimi</button>
<button id="play_vh">play van halen</button>
    Login or Signup to reply.
  2. 0

    You definitely don’t want to duplicate IDs, and you don’t want to duplicate variable names in the same scope either. In any case, there are some better ways to handle this. As this is for a class, I’ll add some detail for the whole thing to get you started in a better way.

    Firstly, there is no need for the IDs in most cases. They end up in the global scope which can cause some confusion and break things for you when you edit larger scripts later. Modern browsers have standardized ways of selecting elements, so IDs are almost never needed.

    Second, you don’t need a separate function for each player.

    I would do something like this:

    <button data-audio-src="son/légendes/jimihendrix.mp3">
  <img src="images/légendes/jimihendrixguitare.png" />
</button>

    This adds a data attribute to your button, indicating that the button should be associated with a particular audio URL. That way, your JavaScript stays the same, no matter which button is clicked. Also, the reason we use a <button> is that it helps screen readers and other alternative input devices know what is a real button and what isn’t. You can always style it as you see fit with CSS.

    Now, in your JavaScript:

    // Create just one audio.  Some devices only support one anyway, and we only need one here.
const audio = new Audio();

// Add a click listener on the whole page, which we'll then filter down
// to just elements with the `data-audio-src` attribute.  Note, if you can
// choose a tighter selector than the whole document, you should, for efficiency.
document.addEventListener('click', e => {
  // Did the clicked element have a `data-audio-src` attribute?
  // Or, was it a child of such an element?  If not, return, do nothing.
  if ( !e.target.closest('[data-audio-src]') ) {
    return;
  }

  // Are we currently playing audio for the clicked button?
  // If so, just pause it.
  if (
    !audio.paused && 
    audio.src === new URL(
      e.target.closest('[data-audio-src]').dataset.audioSrc, 
      location
    ).toString()
  ) {
    return audio.pause();
  }

  // Here, we load a new audio URL and play it.
  audio.src = e.target.dataset.audioSrc;
  return audio.play();
});

    This code is untested so there may be a quirk here, but I think this will give you much more solid footing to start with.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search