Member Avatar for suavedesign

I embeded 3 mp3 files into my website, to play when the user clicks "play". While this works fine in IE, in Chrome, they all start playing when the site is launched. Even though my code says "

autostart="false"

Here is the code I am using:

<embed src="aharddaysnight.mp3"width="140" height="40" autostart="false" loop="FALSE"></embed>

Please check out the url with chrome to see what I mean:

Thanks a lot!

  • 2 Contributors
  • 2 Replies
  • 126 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by suavedesign

Dani AI

Generated

Using the old plugin/embed approach is the likely root cause here. posted markup that relies on browser/plugin-specific parameters, and those are implemented inconsistently across engines. was right to ask for code — seeing the embed-based markup makes the solution straightforward: move to the native HTML5 audio API and control playback explicitly from one player instead of embedding multiple plugin players.

A simple, robust pattern is to place one <audio> element and switch its src when the user clicks a play control. This prevents multiple tracks from starting simultaneously and avoids nonstandard plugin behavior.

<audio id="player" preload="none" controls></audio>

<button class="sample" data-src="aharddaysnight.mp3">A Hard Day's Night</button>
<button class="sample" data-src="help.mp3">Help</button>
<button class="sample" data-src="eleanorrigby.mp3">Eleanor Rigby</button>

<script>
(function(){
  var player = document.getElementById('player');
  var buttons = document.querySelectorAll('.sample');
  Array.prototype.forEach.call(buttons, function(btn){
    btn.addEventListener('click', function(e){
      var src = btn.getAttribute('data-src');
      if (player.src.indexOf(src) === -1) player.src = src;
      player.play();
    });
  });
})();
</script>

Troubleshooting notes: set preload="none" so browsers do not prefetch/auto-play; remove any JS that calls play() on load; test in an Incognito window and with extensions disabled to rule out third-party interference; inspect the Network tab to confirm the MP3 is served with Content-Type: audio/mpeg. Modern Chrome also enforces autoplay/user-gesture rules, so a user click is required to start audio in many cases.

For reference on the audio element and autoplay behavior see the MDN docs: HTML audio element and Chrome autoplay guidance: Chrome autoplay policy.

Recommended Answers

All 2 Replies

Member Avatar for dany12

Ok in my browser Dragon that is based on chrome your controls dosen't work at all I think you have a mistake in you html css or javascript if you post your code it will be easier to spot the error Thank you

Member Avatar for suavedesign

This is my html code:

 <div class="audioSamples">
                <dl class="mpThree">  

                 <dt><embed src="aharddaysnight.mp3"width="140" height="40" autostart="false" loop="FALSE"></embed></dt>
                 <dd class="songTitleOne">A Hard Day's Night</dd>
                </dl>


                <dl class="mpThree">  

                 <dt><embed src="help.mp3"width="140" height="40" autostart="false" loop="FALSE"></embed></dt>
                 <dd class="songTitleTwo">Help</dd>
                </dl>

                <dl class="mpThree">  

                 <dt><embed src="eleanorrigby.mp3" width="140" height="40" autostart="false" loop="FALSE"></embed></dt>
                 <dd class="songTitleThree">Eleanor Rigby</dd>
                </dl>


            </div>

My css for the code is just margins and paddings, basically.

Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.