Interaction sound on different pages

Design help Animations & Interactions
1

hello all, i am trying to extend hover and click states with sounds. There are problems when I click on a button and it leads to a new page, the sound that is actually applied to the button is not triggered. If the button does not lead to a new page the sound is triggered.

In summary:
The click sound is not executed when the button leads to a new page.

Can anyone help me?

This is the code I am using:



<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

<script>
let sound = new Howl({
  src: ["https://www.dropbox.com/scl/fi/e4lspk87fd8s4qe3qeziw/Klick.mp3?rlkey=4pmvt2rk11l0ht395np7jinaa&dl=1"]
});

let clicksound = new Howl({
  src: ["https://www.dropbox.com/scl/fi/9tgerjjz9t46829x5bow9/Anweisung_einblenden.mp3?rlkey=vpoxhylg9vg3bl5gdtlgz67zb&dl=1"]
});

//Hover über Element
$(".play1").on("mouseenter", function () {
  sound.play();
});

//Click auf Element
$(".play1").on("click", function () {
  clicksound.play();
});


//Toggel Globaler Mute
$(".audio").on("click", function () {
  $(this).toggleClass("muted");
  if ($(this).hasClass("muted")) {
    Howler.mute(true);
  } else {
    Howler.mute(false);
  }
});

</script>
2

Hi Raphael, you would need to delay the navigation so that the browser can finish playing the sound first. I’m not familiar with Howler, so check the docs, however it might look something like this for your link clicks;

$(".play1").on("click", function (event) {
  // Prevent the default link behavior
  event.preventDefault();

  // Get the target URL from the href attribute of the link
  let targetUrl = $(this).attr('href');

  // Play the sound
  clicksound.play();

  // Navigate to the link target once the sound finishes playing
  clicksound.on('end', function() {
    window.location.href = targetUrl;
  });
});
3

Hey Michael, thank you very much! It works!

1 Like
4

Its not working for me, getting this error on console.

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

Here is my complete code

<!-- Include Howler.js -->
<script src="https://cdn.jsdelivr.net/npm/howler@2.2.4/dist/howler.min.js"></script>

<script>

var sound = new Howl({
  src: ['https://www.dropbox.com/scl/fi/ay8virkuzuimx1hnihddb/sound-click-on-link.mp3?rlkey=ygb21vk1c096evdjadlql3g6y&dl=0'],
  autoplay: true
  
  });

$(".is_link").on("click", function (event) {
  // Prevent the default link behavior
  event.preventDefault();

  // Get the target URL from the href attribute of the link
  let targetUrl = $(this).attr('href');

  // Play the sound
  sound.play();

  // Navigate to the link target once the sound finishes playing
  sound.on('end', function() {
    window.location.href = targetUrl;
  });
});

</script>
5

The error seems pretty clear, it requires a user action before the browser will play media.
Autoplay won’t work.

6

It was audio format issue and source. I have changed the dropbox link to other cdn hosting mp3 and now its working fine.