Direct click of div won't play audio/video. Click below div and it plays

Question

I am building a WordPress site and found some examples for audio/video elements playing upon clicking another element with a data-value. Here is where I took the code from that I used for this particular situation: change <audio> src with javascript.

See my code below:

/* Load music to music player on single band page */
function musicPlay(e){
  e.preventDefault();

  var elm = e.target;
  var audio = document.getElementById('audio');

  var source = document.getElementById('audioSource');
  source.src = elm.getAttribute('data-value');

  audio.load();
  audio.play();
}

And here is the code where the audio will be loaded:

<div class="media-widget">
  <audio id="audio" controls="controls">
    <source id="audioSource"></source>
      Your browser does not support the audio format.
  </audio>
  <div id="musicList">
    <div class="media-info" onclick="musicPlay(event)" data-value="cool-song.mp3">
      <div class="media-number">
        1.
      </div>
      <div class="media-title">
        Cool Song
      </div>
      <div class="media-length">
        4:31
      </div>
    </div>
    <!-- /.media-title -->
  </div>
  <!-- /#musicList -->
</div>
<!-- /.media-widget -->

I am building this out in WordPress and using Advanced Custom Fields to loop through songs. You can check out the link here to test it: http://184.154.22.154/~pacif099/band/hillcrest-court/ and see what I am talking about when clicking one of the songs. Click directly on the song and it won't load, but if you click just below the song it loads and starts playing.

UPDATE:

I also get this error in the console:

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

Welcome to StackOverflow! Please post your RENDERED HTML, not the loop. We need to see the HTML. Please read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — disinfor, Oct 02 '17 at 18:33
Can't duplicate... put your code into a [fiddle](https://jsfiddle.net/5vr5z2a7/) and it runs the `musicPlay` function when you click on "Cool Song." — freginold, Oct 02 '17 at 18:49
Go to the link I provided and you will see what I am talking about... http://184.154.22.154/~pacif099/band/hillcrest-court/ — lavekyl, Oct 02 '17 at 18:50
Can't click on that link -- at work. If it runs fine here but not there, it's probably something else in your code or that environment. — freginold, Oct 02 '17 at 18:52
It runs if you enter static HTML, the way I edited it. But I am doing this in WordPress and using Advanced Custom Fields to loop through fields specific to a "Band" custom post type. I previously had that code showing, but edited it based on another comment above. Clicking the link I provided will show you what I am talking about. It works the same locally as it does on a live site. — lavekyl, Oct 02 '17 at 19:00
When you say, "*Click directly on the song and it won't load*," do you mean clicking on the play/pause button or duration bar, or do you mean clicking on the song name? — freginold, Oct 02 '17 at 19:34
Clicking on the song name. It works if you click directly below the song name and just above the border. But if you click directly on the song name it doesn't. — lavekyl, Oct 02 '17 at 20:19
I also get this "Uncaught (in promise) DOMException: The play() request was interrupted by a new load request." in the console. — lavekyl, Oct 02 '17 at 20:21

score 0 · Accepted Answer · answered Oct 05 '17 at 16:18

I resolved my own issue. For reasons that I am unable to explain, the use of multiple div elements within the media-info div created issues. So updated it to this:

<ul id="musicList">
  <li>
    <div class="media-info">
      <div class="media-number">
        <p>1.</p>
      </div>
      <div>
        <a href="#" class="media-title" data-value="cool-song.mp3">
          Cool Song
        </a>
      </div>
      <div class="media-length">
        <p>4:31</p>
      </div>
    </div>
    <!-- /.media-info -->
  </li>
</ul>
<!-- /#musicList -->

And I updated the JavaScript to match the code I used from this other question: change <audio> src with javascript.

/* Load music to music player on single band page */
musicList.onclick = function(e) {
  e.preventDefault();

  var elm = e.target;
  var audio = document.getElementById('audio');

  var source = document.getElementById('audioSource');
  source.src = elm.getAttribute('data-value');

  audio.load();
  audio.play();
}

Direct click of div won't play audio/video. Click below div and it plays

1 Answers1