Button for Toggling Audio Play and Pause

Is it possible to create an SVG image that changes color slightly when hovered over, and when clicked toggles to another SVG image that can be switched back to the original by clicking again with the same hover effect? Additionally, when clicked, it should play/pause a source audio file.

body {
  background: black;
}
<script async src="//jsfiddle.net/jbwhr7n9/1/embed/js,html,css,result/dark/"></script>
I have been trying to implement this functionality but have not found a clear answer for this specific use-case. Any tips or guidance would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

I utilized jQuery to control the playback and pause functionality of an audio file, toggling the visibility of different buttons accordingly. 

$('#play').click(function() {
  $('#audio-file').trigger('play');
  $(this).hide();
  $('#pause').show();
});

$('#pause').click(function() {
  $('#audio-file').trigger('pause');
  $(this).hide();
  $('#play').show();
});
body {
  background: #242626
}
.blockA {
     border: 6px solid #181919;
     background: #181919;
}
.blockB {
     border: 6px solid #2c3030;
     background: #2c3030;
     display: inline-block;
     margin: 8px 8px 8px 8px;
}
.blockC {
     border: 6px solid #242626;
     background: #242626;
}
.titleHover {
     border: 4px solid transparent;
     width: 200px;
     height: 301px;
     display: block;
}
.titleHover > img {
     max-width: 100%;
     height: 100%;
}
.titleHover:hover {
     border-color: #49bdba;
}
a:link {
     color: #49bdba;
     background: transparent;
}
a:visited {
     color: #49bdba;
}
a:hover {
     color: #49bdba;
     background: transparent;
}
a:active {
}
.sBC {
display: inline-block;
cursor: pointer;
}

.sBB1, .sBB2, .sBB3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}

/* Rotate first bar */
.change .sBB1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .sBB2 {
opacity: 0;
}

/* Rotate last bar */
.change .sBB3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
ul {
background-color: #181919;
list-style-type: none;
margin: 0;
padding: 1;
}
.btn-secondary {
color: #fff;
background-color: #242626;
border-color: #242626;
}
.btn-secondary:focus {
box-shadow: 0 0 0 3px rgba(0,0,0,0);
}
.blockD {
display: inline-block;
}

.bottom-bar {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
}
.mbuttonhover {
  fill: #49bdba;
  cursor: pointer;
}
.mbuttonhover:hover {
  fill: rgb(36,100,98);
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<audio src="https://d3cj65qhk7sagp.cloudfront.net/tracks/Beacon/Faux+Tales+-+Beacon.mp3" id="audio-file"></audio>
<div class="blockA">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 150 150" width="10%" height="10%" class="mbuttonhover active" id="play"><defs><clipPath id="_clipPath_yKzkJPlSAzMkZT8ai7ySqD3TM8Th7XOR"><rect width="100%" height="100%"/></clipPath></defs><g clip-path="url(#_clipPath_yKzkJPlSAzMkZT8ai7ySqD3TM8Th7XOR)"><path class="expand" d=" M 130.884 81.689 L 78.986 111.95 L 27.087 142.212 C 19.761 146.484 13.804 143.067 13.794 134.586 L 13.722 75.049 L 13.65 15.513 C 13.64 7.032 19.626 3.535 27.008 7.709 L 78.895 37.047 L 130.783 66.386 C 138.165 70.56 138.211 77.417 130.884 81.689 Z "/></g></svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate; display: none;" viewBox="0 0 150 150" width="10%" height="10%" class="mbuttonhover" id="pause"><defs><clipPath id="_clipPath_r5GZgsezpi491ktbWcAvoJzmMQuyG3g9"><rect width="150" height="150"/></clipPath></defs><g clip-path="url(#_clipPath_r5GZgsezpi491ktbWcAvoJzmMQuyG3g9)"><path d=" M 20.76 15 L 57.24 15 C 60.419 15 63 17.581 63 20.76 L 63 129.24 C 63 132.419 60.419 135 57.24 135 L 20.76 135 C 17.581 135 15 132.419 15 129.24 L 15 20.76 C 15 17.581 17.581 15 20.76 15 Z  M 92.76 15 L 129.24 15 C 132.419 15 135 17.581 135 20.76 L 135 129.24 C 135 132.419 132.419 135 129.24 135 L 92.76 135 C 89.581 135 87 132.419 87 129.24 L 87 20.76 C 87 17.581 89.581 15 92.76 15 Z "/></g></svg>
  </div>
</div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on extracting latitude and longitude geocode from a JSON response using the Google Maps API and storing them in variables with JavaScript

RETRIEVING GEO LOCATION VIA JSON https://maps.googleapis.com/maps/api/geocode/json?address=KOLKATA&key=API_KEY { "results" : [ { "address_components" : [ { "long_name" : "Kolkata", ...

javascriptjsongoogle-mapsgoogle-maps-api-3

How can an array of objects be sent as a query string to the endpoint URL in React?

I'm currently developing a react application and facing the challenge of dynamically constructing and appending query strings to URLs. This is necessary because I have a shared base endpoint for all links, but each link may require different parameter ...

javascriptreactjsreduxecmascript-6

Tips for delivering a variable to a React Native Stylesheet

Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...

javascriptcssreactjstypescriptreact-native

Issue with JQuery dialog not triggering autocomplete

I have integrated the JQuery 1.7.2 and JQuery-UI 1.8.18 libraries with both http://docs.jquery.com/UI/Dialog and http://docs.jquery.com/UI/Autocomplete. On a standard page load, the autocomplete function works perfectly with a text box in a form. It' ...

javascriptjqueryjquery-ui

Using the Unsigned Right Shift Operator in PHP (Similar to Java/JavaScript's >>> Operator)

Before marking this as a duplicate, please take a moment to read the information below and review my code * my updated code! The issue I am facing is that I need to implement Java/JavaScript '>>>' (Unsigned Right Shift / Zero-fill Rig ...

javascriptjavaphpbit-manipulationbit-shift

Utilizing Local Files in a Bootstrap Video Carousel

Currently working on a website for a school project and I am trying to incorporate a carousel of videos. After finding a bootstrap carousel template that played videos linked to a server, I attempted to switch it out with local video files without succes ...

htmlcssbootstrap-4

In the Sandbox, element.firstChild functions properly, but it does not work in the IDE

Encountered an issue that has me puzzled. To give you some context, I attempted to create a native draggable slider using React and positioned it in the center of the screen, specifically within my Codesandbox file. The code snippet I utilized is as follow ...

javascriptreactjsnext.jsjsx

After transitioning to a different laptop, I encountered unexpected ES6 syntax errors while trying to compile my Vue project

I recently acquired a new laptop and encountered an issue. After pulling my Vue project from GitHub, I proceeded to run npm install, followed by npm run dev. ERROR Failed to compile with 1 errors 1:38:10 PM ...

javascriptnode.jsvue.jsecmascript-6vuex

Having trouble running the npm run build command with vue-cli for production builds

Anticipated Outcome Executing npm run build should generate the production-ready dist bundle that can be deployed on a specified device. Current Scenario Despite successful local builds, encountering errors when attempting to execute npm run build on an ...

javascriptvue.jsnpmvue-clivue-cli-3

Looking to verify a disabled select element and adjust the opacity of that element when it is disabled

$_product = $this->getProduct(); $_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes()); ?> <?php if ($_product->isSaleable() && count($_attributes)):?> <dl> <?php foreach($_attrib ...

javascriptjqueryhtmlcssmagento-1.9

What could be the reason for my new course not being recognized?

Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...

jquerycsshtml

Tips for keeping components mounted despite changes in the path

How can I maintain state in React routes to prevent unmounting when switching between them? In my application, it's crucial to keep the state intact during route changes. When changing routes, the respective components mount and unmount. How can this ...

javascriptreactjsreact-router

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

Hello there! I'm currently working on creating a status bar where I can add an image after another image. Let me explain my idea clearly. So, I have two images in GIF format: one is white and 10x10px, and the other one is black and also 10x10px. On ...

javascripthtmlcssimagetags

How can I set up a cycling image background for the main div and a floating menu?

I was wondering how I could keep a cycling image background stationary behind the main content while scrolling through the page. You can check out the project itself by following this link. Feel free to use any of the code, including the fixed header menu, ...

jqueryhtmlcssbackground-image

What is the best way to eliminate the final border in a row that has been applied using the <

I have a table where the tr is styled with a border. I am looking to eliminate the border from the last td in the tr. Here is an example: <table> <thead> <tr> <th>a</th> <th>b</th> <th&g ...

htmlcss

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

Is there a way to determine the quantity of child objects and transmit the calculated index to each individual child object?

My data is structured as shown below: team1 : { author92 : "John" , author43 : "Smith" }, team2 : { author33 : "Dolly", author23 : "Mark" }, I want to display Authors grouped together with an ad ...

javascriptjsonreactjsloopsecmascript-6

I'm experiencing some challenges with setting up my sequelize relationships

After tirelessly searching for a solution to my problem and coming up empty-handed, I decided to reach out here. Every Google search result seems unhelpful and every link I click on is disappointingly pink. Hello everyone! I'm facing difficulties est ...

javascriptnode.jssequelize.js

Issues with monitoring multi-touch gesture events using Hammer JS

Can anyone figure out why this code, which utilizes hammer.js for multi-touch gesture events, is not functioning as expected? This code closely resembles one of the examples on Hammer's documentation. Despite setting up swipe events on specific elem ...

javascriptjquerymulti-touchhammer.js

What is the best way to link data from SQL Server to an HTML webpage?

Seeking assistance on how to display data from a SQL Server database in an HTML page using JavaScript, AJAX, and jQuery without the need for C#, PHP, VB.NET etc. Can someone please provide some reference links or share example code? ...

javascriptjqueryhtmlsql-serverajax