Stopping the sound when its' Div is hovered over

Question

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area.

Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/

$(document).ready(function(){
var audio = $("#audio-1")[0];
$(".box").hover
(function() {
    audio.play();
  },
(function(){
 audio.stop();
});
});

.box{
  height:500px;
  width:500px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:25px;
  color:white;
  background:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls id="audio-1">
  <source src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<div class="box">
If you Hover me, the song will play!
</div>

javascript jquery html css

Answer 1

Answer №1

Make sure to utilize audio.pause() instead of .stop(). See the code snippet below for an example:

$(document).ready(function(){
  var audio = $("#audio-1")[0];
  $('.box').on({
    mouseenter: function() {
      audio.play();
    },
    mouseleave: function() {
      audio.pause();
    }
  });
});

To resume playback from where it left off, simply use the method as shown above. If you wish to restart from the beginning (as another user mentioned), include audio.currentTime = 0; before the start or after the pause command.

You can view a working example on JSFiddle here: https://jsfiddle.net/nLm9bxnw/7/

Answer 2

Make sure to utilize audio.pause() instead of .stop(). See the code snippet below for an example:

$(document).ready(function(){
  var audio = $("#audio-1")[0];
  $('.box').on({
    mouseenter: function() {
      audio.play();
    },
    mouseleave: function() {
      audio.pause();
    }
  });
});

To resume playback from where it left off, simply use the method as shown above. If you wish to restart from the beginning (as another user mentioned), include audio.currentTime = 0; before the start or after the pause command.

You can view a working example on JSFiddle here: https://jsfiddle.net/nLm9bxnw/7/

Answer 3

Answer №2

halt is not a commonly used JavaScript method for manipulating audio and video files. Instead, consider using one of the following alternatives:

audio.pause();
audio.currentTime = 0;

For more information, check out this discussion on Stack Overflow

Answer 4

halt is not a commonly used JavaScript method for manipulating audio and video files. Instead, consider using one of the following alternatives:

audio.pause();
audio.currentTime = 0;

For more information, check out this discussion on Stack Overflow

Answer 5

Answer №3

$(document).ready(function(){
var music = $("#music-1")[0];
$(".container").hover
(function() {music.play();});
});

https://jsfiddle.net/Cuchu/Ln9p9432/

Answer 6

$(document).ready(function(){
var music = $("#music-1")[0];
$(".container").hover
(function() {music.play();});
});

https://jsfiddle.net/Cuchu/Ln9p9432/

Stopping the sound when its' Div is hovered over

Answer №1

Answer №2

Answer №3

Similar questions

Highlighting JavaScript code with React Syntax Highlighter exclusively

Passing along the mouse event to the containing canvas element that utilizes chart.js

modify hidden input values with a dropdown menu and the power of jquery

Running concurrent codes is not possible in Node.js serialport

Instructions for embedding a swf file in HTML and linking it to a different page

What is the best way to incorporate Vue.js into a Django project?

Bringing in two JavaScript files with identical names

How to trigger a JavaScript function using a button click

Having trouble grasping the functionality of Javascript in this code (using Coffeescript and Commander in Node.js)

What are the steps to resolve the error 'content-type missing boundary' and encountering the issue with getBoundary not being recognized as a function?

Issue with JQuery: Fancybox not functioning properly within Google Maps

Configuration of an MVC-based web application

Modify the Ng-Pattern with Jquery

Enclose a pair of divs within a fresh div wrapper for better organization

Meteor, enhanced with the dynamic Iron Router module and integrated

What is the best way to utilize the .done() callback in order to execute a function when new data is loaded upon request?

Creating adaptable HTML images by specifying width and height attributes within the image tag

Node.js Express application: Managing endpoint conflicts

How to Implement Force Unmount in Vue 3 When Deactivated

Customizing the background color in TurnJSIncorporating