Trigger a random tune when hovering the mouse

Question

Trigger a random tune when hovering the mouse

I need help figuring out how to make a fixed image on my page trigger a random sound track when hovered over. The sound could be one of five different tracks.

Here is the HTML for my image:

<img src="images/Airplane.png" class="Airplane-photo">

Below is the CSS code I am using:

.Airplane-photo {
  position: fixed;
  z-index: 1;
  height: 200px;
  bottom: 0px;
  right: 0px;
}

All of the sound tracks are in MP3 and OGG formats. I have already looked at this resource but it doesn't provide the solution I'm looking for: https://css-tricks.com/play-sound-on-hover/

If anyone knows of a way to achieve this, please let me know!

Thank you in advance

javascript jquery html css

Answer 1

Answer №1

http://jsbin.com/fiyomafuce/2/edit

To implement random audio selection, you can create an array containing the paths to your mp3/ogg files:

var audio = ["audio-1.mp3", "audio-2.mp3", "audio-3.mp3", "audio-4.mp3", "audio-5.mp3"];

The following function generates a random number between 0 and 5 (the length of the audio array), ensuring that no updates are necessary when adding more mp3 files:

function getRandomAudio() {
    var max = audio.length;
    return Math.floor(Math.random() * (max + 1));
}

By hovering over a button, the audio source will be updated with a new item from the audio array.

$btn.on('mouseover', function(){
  var index = getRandomAudio(); // get a random index
  $audio.attr('src', audio[index]); // update source
  $audio.get(0).play();
});

If you wish to stop the sound when the cursor moves outside the button, simply utilize the mouseout event like this:

$btn.on('mouseout', function() { $audio.get(0).pause() });

Please note that no sound will be heard as the paths provided are not real.

Answer 2

http://jsbin.com/fiyomafuce/2/edit

To implement random audio selection, you can create an array containing the paths to your mp3/ogg files:

var audio = ["audio-1.mp3", "audio-2.mp3", "audio-3.mp3", "audio-4.mp3", "audio-5.mp3"];

The following function generates a random number between 0 and 5 (the length of the audio array), ensuring that no updates are necessary when adding more mp3 files:

function getRandomAudio() {
    var max = audio.length;
    return Math.floor(Math.random() * (max + 1));
}

By hovering over a button, the audio source will be updated with a new item from the audio array.

$btn.on('mouseover', function(){
  var index = getRandomAudio(); // get a random index
  $audio.attr('src', audio[index]); // update source
  $audio.get(0).play();
});

If you wish to stop the sound when the cursor moves outside the button, simply utilize the mouseout event like this:

$btn.on('mouseout', function() { $audio.get(0).pause() });

Please note that no sound will be heard as the paths provided are not real.

Trigger a random tune when hovering the mouse

Answer №1

Similar questions

Incorporate CSS styling from a separate .css file into a material component

Incorporate fresh data into dropdown options upon selection using Vue3

Showing the image as a backdrop while scrolling through text

What is the method for arranging objects in AngularJS using a custom sorting sequence?

Incorporating Ajax comments into an Ajax-powered status feature

Implementing setTimeout with the copy button: A guide

Ways to insert text inside a border

What is the best way to utilize Content-Disposition: attachment?

Executing a function in JQuery with care

Optimizing Your HTML5 Code: Best Practices

Issue with IE7 when using JQuery to repopulate a <ul> unordered list: new elements showing up under previously hidden elements

Struggling to achieve a horizontal scroll using 'overflowX' in MUI, but unfortunately, it's not functioning as expected

Try utilizing a variety of background hues for uib progressbars

Using the Nodejs Array prototype filter method within a JSON object

What is the best way to extract HTML using selenium.webdriver in Python?

executing minimal tasks when including a new particular category

Avoiding the use of if statements in Javascript

What can be done to stop $.ajax from automatically appending [] to my key names when making requests (aside from using processData: false

Trouble with Printing Query - MySQL, PHP, and HTML -

Refreshing Child's Activities