After implementing the code snippet I discovered online, my website now plays audio when a specific button is clicked. However, I am interested in finding out how to modify the code so that the audio can be paused or stopped when the same button is clicked again. Any suggestions on how this can be achieved with similar code?
const rollSound = new Audio("./mp3/SoItGoes.mp3");
$('#Triangle').click(e => rollSound.play());
To indicate the state of the player, you can assign a specific class to the button (class = "active" if it's active, no class if paused), and then assess this class during a button click event:
HTML:
<button id="Circle">Play/Stop</button>
JavaScript:
$('#Circle').click(function(e) {
if ($(this).hasClass('active')) {
stopSound();
$(this).removeClass('active');
} else {
playSound();
$(this).addClass('active');
}
});
To incorporate an if statement within your event handler for checking the button text value, you can implement the following approach:
HTML:
<button id="Triangle">Start</button>
JS:
const playSound = new Audio("./mp3/SoItGoes.mp3");
$('#Triangle').click((e) => {
if($('#Triangle').text() === 'Start') {
playSound.play();
$('#Triangle').text('Stop')
}
else {
playSound.pause();
$('#Triangle').text('Start')
}
});
Hello, I am a beginner in BreezeJs I have a post method on my Controller // POST api/company/post [Authorize(Roles = "Admin")] [AcceptVerbs("POST")] [HttpPost] public object **SaveChanges**(JObject companyRequest) ...
I'm working with a code snippet that involves comparing two dates – a specified date and the current date. However, when trying to calculate the difference in days between these dates, I keep getting either 0 or an unexpectedly large number like "31 ...
My aim is to create a pomodoro timer using Next.js and I'm trying to link the body's background image to a state. However, my code isn't functioning properly. This is the code I used to update the body style: import { VscDebugRestart } from ...
I recently implemented a slider using code from an online tutorial found here: http://jsfiddle.net/RXpjM/ While I have a good understanding of how the code functions, I am facing a challenge with the "going back to the beginning" option. Currently, the sl ...
In my website, I have background music and a background video (webm format) embedded. I am facing an issue with making play/pause buttons in the form of png images work for both the video and the music. The background music is added using the embed tag wi ...
Is there a way to change the color of a link when hovering over the entire div it's in, rather than just the link itself? Can this effect be achieved using only HTML & CSS? For instance, if I had (jsfidde), how could I make the link turn blue when ho ...
Due to a specific reason, I am loading CSS and scripts into my head tag using the "append" method. For example: $("head").append('<script type="application/javascript" src="core/js/main.js"></script>'); I'm asynchronously pulli ...
On my main HTML page, I have implemented a functionality that allows loading other HTML pages into a specific div using jQuery. The code snippet looks like this: $('.controlPanelTab').click(function() { $(this).addClass('active').s ...
I’m facing a challenge in getting individual results for each item after a successful AJAX callback. Currently, I am able to retrieve results, but when there are multiple items, all displayed results are being added to each div instead of just the corres ...
Utilizing the JQuery ajax method to invoke a controller from a view has been successful in calling the controller's action method, retrieving data from the database, and displaying it in the corresponding view. However, despite this success, the view ...
...but a malfunction isn't one. Hey there, I am new to learning so I apologize for the seemingly simple question. I'm experimenting with a theoretical logic statement that would work using javascript. For instance: if (issues == 99) { malfunct ...
I have the following code snippet: const somePromises = values.map(({variable, value}) => this.post('/api/values/', { variable, value, item: itemId, }) ); await Promise.all(somePromises); if (somecondition) { ...
As I try to implement NTLM authentication from my Ionic app, I have successfully tested the request using Postman. While Postman works with NTLM Authentication option, it does not offer any code for Angular (specifically for Ionic). In my research, I disc ...
Is there a way to dynamically change routes in React Native when a button is pressed? Inside my SplashContainer component, I have the following method: handleToSignUp = () => { console.log("Running handleToSignUp") this.props.navigator.push({ ...
I'm attempting to retrieve a JSON response from a factory, save it as a variable, and make it accessible from two different controllers. Below is the code I am utilizing: storyFactory.js var story = angular.module('story.services', []); ...
<div id="slider"> <div id="pro1"></div> <div id="pro2"></div> <div id="pro3"></div> </div> <div id="thumb"> <a href="#pro1"> <img id="tpro1" src="projects/tpro5.jpg" style="hei ...
I'm working on a website that will have multiple pages, each containing tables. To streamline this process, I wanted to create a table component. However, I haven't added any data to the tables yet because I need to manipulate it using JavaScript ...
Having trouble with jquery.noConflict not working when loading from an external file using php includes? Also noticing that some scripts may not be fully loading as well. Mainfile.php <script type="text/javascript" src="js.jquery/jquery.1.8.2.min.js"& ...
On my ASP.Net page, there is a screen where users can select between 1 and 5 text boxes to input an amount. Depending on certain criteria, a specific number of these edit boxes are displayed - no hiding involved. So if I choose to display 3 boxes, only 3 w ...
I have a substantial dataset containing documents that sometimes reference each other and sometimes do not. Before I can perform mapreduce operations based on these cross-references, I need to ensure that the array of cross-references is consistent for eve ...