Member Avatar for StephenopolousINC

Hello, I am trying to play a sound file directly in chrome. Is this even possible? I think it has to do with HTML 5, which I am unfamiliar. I know how to do it with plugins but that requires the user to have the plugin and interrupts their experience. I want them to hear the sound without any interruptions.

  • 3 Contributors
  • 6 Replies
  • 126 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by StephenopolousINC

Dani AI

Generated

This thread correctly moved toward HTML5 audio, but a few important, practical details are missing for modern Chrome (and other browsers): autoplay rules, codec compatibility, low-latency playback for UI effects, and how to handle play() failures.

Autoplay and user-gesture rules: Chrome will often block audible autoplay unless the page meets its engagement or gesture criteria (muted autoplay is allowed). For the official guidance see the Chrome autoplay policy: Autoplay policy changes. Calls to audio.play() return a Promise and may reject when playback is blocked, so that rejection should be handled.

Formats and delivery: Provide at least an MP3 source (widely supported) plus an alternative like Ogg for broader coverage; see supported codecs and browser compatibility on MDN: Audio codecs. Use preload="auto" for short effects and reset currentTime = 0 before replaying to avoid delays.

Example patterns (short, applicable code):

<audio id="fx" preload="auto">
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
</audio>

document.getElementById('btn').addEventListener('mouseover', function() {
  var a = document.getElementById('fx');
  a.currentTime = 0;
  a.play().catch(function(err){
    // playback blocked (autoplay/user gesture). Consider resuming after a user gesture.
  });
});

For UI sound effects that must play with minimal latency, use the Web Audio API: create an AudioContext, decode and cache the buffer, then start a BufferSource on mouseover. Note that many browsers require the AudioContext to be resumed from a user gesture (call audioCtx.resume() on the first click/tap). This balances and observations with modern browser behavior and explains why saw different results depending on timing and interaction.

Recommended Answers

All 6 Replies

Member Avatar for StephenopolousINC

wow

Edited by StephenopolousINC because: Accidental Post
Member Avatar for JorgeM

Why did you post wow?

In any case, you have options. Yes, HTML audio element is one but is not supported by <= IE8. One option that only depends on JavaScript is the Yahoo WebPlayer. Take a look: http://webplayer.yahoo.com/

Easy to integrate in your web docs.

Edited by JorgeM
Member Avatar for zeroliken

shouldn't this be simple like using the <audio> tag or am I missing a point here?

Member Avatar for StephenopolousINC

Thanks for the info and the reason I posted Wow is that after I posted my question an automatic post congratulating my on not being a newbie any more posted and I wanted to take it off and the only way was to edit it. So, I just felt like wow was as good as anything was. Furthermore, I would disagree about not being a newbie poster.
At any rate I will check out the link and thanks again for the assistance.

Member Avatar for StephenopolousINC

I guess it should be simple. What I am trying to achieve is to have an audio file play on an event not have a player. I want the audio file to play on a mouseover event or an onload event without the user having to do anything at all. I have several certifications in this area but certs and experience are two different things. So, it is I that is probably missing something here. If I use the <audio> tag what file format will I have to use?

Member Avatar for StephenopolousINC

hello zeroliken, thanks the <audio> tag worked great!

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.