Member Avatar for suavedesign

I am having a little trouble with sound on mouseover in my website, if anyone can help, I'd greatly appreciate it.
The link to my site is www.trecall.com.
There are two menus, and each menu has a different sound that supposed to be heard on mouseover.
Firstly, sometimes when I open the site, the sound is not heard at all, and sometimes it is. Why is that?
Also, there are two different sounds, one on the top menu and one on the main menu. When I put my mouse on one button from one menu, and hear that sound, the same sound will be heard the next time a mouseover on a button, regardless if that's the right sound for that button or not!
And one more thing: The sound on the main animated menu is not heard correctly. It's supposes to be one clear sound, but it usually comes out choppy. How come?

If anyone can help me out with this, I'd really appreciate it! Thanks.

  • 2 Contributors
  • 2 Replies
  • 178 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by suavedesign

Dani AI

Generated

Quick summary and practical fixes that build on 's point about network/CPU: the symptoms described by (intermittent first-load audio, the wrong clip reappearing, and choppy playback during animation) usually come from three distinct issues — audio not preloaded or AudioContext not resumed, event-binding/closure or reuse bugs, and decoding/main-thread contention. The checklist and code below address each with concrete, modern fixes.

Use the Web Audio API for short UI sounds: fetch and decode once, then create a fresh BufferSource when a hover happens. This avoids decode-on-demand stutter and keeps latency low.

const ctx = new (window.AudioContext || window.webkitAudioContext)();
const buffers = {};

async function loadSound(name, url){
  const res = await fetch(url);
  const ab = await res.arrayBuffer();
  buffers[name] = await ctx.decodeAudioData(ab);
}

function playSound(name){
  if(!buffers[name]) return;
  const src = ctx.createBufferSource();
  src.buffer = buffers[name];
  src.connect(ctx.destination);
  src.start(0);
}

/* attach handlers to elements that have data-sound="top" or "main" */
document.querySelectorAll('[data-sound]').forEach(btn =>
  btn.addEventListener('mouseenter', () => playSound(btn.dataset.sound))
);

Common bugs to check: event handlers added in a loop with var can capture the wrong index (use let or data attributes); changing a single HTMLAudio.src asynchronously can make the “last-set” sound play for multiple items. If a simple fallback is needed, create one Audio object per sound at load time and call audio.currentTime = 0 before play().

To fix choppiness: pre-decode (as above), keep effects very short, avoid heavy JS work on the main thread (use requestAnimationFrame or CSS transforms for animation), and check DevTools → Network/Performance to see if decoding or GC spikes align with stutters. Also resume the AudioContext on first user gesture since many browsers block audio until then:

document.addEventListener('pointerdown', () => { if(ctx.state === 'suspended') ctx.resume(); }, {once:true});

Finally, accessibility and UX: provide a mute toggle, avoid essential information delivered only by sound, and remember mobile devices have no hover — map to touch events or provide on-tap feedback instead.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

am having a little trouble with sound on mouseover in my website, if anyone can help, I'd greatly appreciate it.
The link to my site is www.trecall.com.
There are two menus, and each menu has a different sound that supposed to be heard on mouseover.

dont do it, sounds are annoying, but if you must ...

Firstly, sometimes when I open the site, the sound is not heard at all, and sometimes it is. Why is that?

the sound has likely not downloaded at that time, whatever sound it is has to download to the user before it plays, there is latency in that, which may be longer than the time the user has onmousover
a possible fix is to force download of the file either by a script or <img src='filename.wav' style='display:none;' width='0' height='0'> any of a dozen forcefiledownload tricks near </body></html> the endo of the file

Also, there are two different sounds, one on the top menu and one on the main menu. When I put my mouse on one button from one menu, and hear that sound, the same sound will be heard the next time a mouseover on a button, regardless if that's the right sound for that button or not!

dunno sorry

And one more thing: The sound on the main animated menu is not heard correctly. It's supposes to be one clear sound, but it usually comes out choppy. How come?

bandwidth issues, or proceesor use %age issues, either the download speed is maxing out or the processor is reaching the point where it cannot timeslice enough to complete all the tasks to it esp, running the animation

If anyone can help me out with this, I'd really appreciate it! Thanks.

Edited by almostbob because: n/a
Member Avatar for suavedesign

thanks, almostbob.

Edited by suavedesign because: n/a
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.