What is the method for activating a resume using sound settings with JavaScript?

Having trouble controlling the audio with this code. When I click a button that has an onclick calling playpause(), it pauses the audio. But when I click again, it doesn't resume.

    var audio=new Audio("music.mp3");
    function music() {
        audio.play();
        audio.loop="true";
    }

    function playpause() {

        if(audio.play)
        {
            audio.pause();
        }
        else  if(audio.pause)
        {
            audio.play();
        }
    }

On the other hand, using the following code allows for both pause and play functions to be accessed from the same button:

    var audio=new Audio("music.mp3");
    function music() {
        audio.play();
        audio.loop="true";
    }
    var count=0;
    function playpause() {

        if(count%2==0)
        {
            audio.pause();
        }
        else
        {
            audio.play();

        }
        count++;
    }

What's causing the issue in the first code snippet?

Answer №1

When working with the HTML5 audio tag, it is important to note that there is no 'play' property available for direct use in your code. However, you can utilize the 'paused' property which, when called, returns the opposite Boolean value. This property allows you to check the current state of the audio element.

Here's an example:

If (audio.paused) {
  audio.play();
}
else {
  audio.pause();
}

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

Can an inline try be implemented without including a catch block as demonstrated?

I have a scenario where I need to execute code that may result in an error without catching it. If the response is not valid JSON, then the desired outcome should be 0: Here is the code snippet I am considering: var overallProgress = try {JSON.parse(text ...

Issue with cross-origin security when applying HTML5 video tag to a webGL texture

I am trying to link a remote video to a texture in WebGL. To allow the video source to be different from the document source, I added Access-Control-Allow-Origin:* to the http headers of the video source. Additionally, I set an anonymous origin for the vid ...

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...

"Learn the steps to include multiple g:select options in your application

Click here to download an image Is it possible to dynamically append a combobox below the User combobox when the "ADD" button is clicked using JavaScript? I attempted this with jQuery last night, but I couldn't get it to work properly. <g:select ...

Alter the Color of the 'div' According to the Background

At the bottom right of my website, there is a black chatbot icon. The web footer also has a black background. To create a clear contrast, I have decided to change the color of the chatbot to white as users scroll to the bottom of the page. I implemented t ...

Dispose of jQuery instance when it is no longer required

Encountered an issue with jQuery: There are multiple div containers on a page with the class "stackgo" and different data attributes. For example: <div class=\"stackgo\" data-an=\"HEY\" data-ms=\"HO\" data-me=\"HM&bso ...

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Hey there, I could really use some assistance with an issue I'm facing. I have this particular structure that's causing me trouble. <div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed"> ... </div> < ...

Preventing mouse controls from moving the cube: a gift/page2 tutorial

(gift/page2) in this snippet: You can observe a demonstration of a red cube rotating on the web page. However, my goal is to prevent the cube from being manipulated by the mouse or fingers on an iPad. I want the cube to remain stationary in its position. ...

Combining strings with JQuery

Looking for help with a code snippet <script> function goToDetails($i){ $(function(){ var transValue = $('#trans'+$i).html(); var mileageValue = $('#mileage'+$i).html(); var engineValue = $('#eng'+$i).html ...

What could be causing the absence of several nodes in my three.js animations?

As I work on creating a portfolio using three.js, I've encountered an issue with my animation sets not playing after triggering an event. Initially, the code worked fine, but now I keep receiving a series of warnings and the code doesn't run at a ...

Troubleshooting: EADDRNOTAVAIL issue encountered on Heroku Node.js server

After successfully creating a nodejs server on OpenShift, I am now embarking on a new project and attempting to replicate the same server on Heroku. Below is a snippet of the code for my server: var http = require('http'); var port = process.en ...

Unable to retrieve $_POST data using $.post requests while iterating through options with .each

Using the .each method, I constructed an options string and sent it via .post to an external script. clicked.closest("form").find("input,textarea").each(function(){ var input=$(this); if(index==1){ options = ...

Error message "npm install is causing a warning due to an outdated lockfile"

npm 8.1.2 | node 16.13.1 Upon running npm install, I encountered the error message below. It seems to be related to version compatibility issues, even though I tried installing npm version 7.19.1, the same error persists. Any suggestions on why this is ha ...

Adjust the burger menu color based on the background color of the section

Currently, I am working on creating a hamburger menu component with fixed positioning using the 'fixed' property. The menu icon consists of three white lines by default, but I want them to change to black when placed in a white section. I have tr ...

having difficulty iterating through the data using map function

When attempting to use the map function in React Material UI to display an array of data in a select box, I encountered the error TypeError: Cannot read properties of undefined (reading 'map') while using the following code. Can anyone help me id ...

What steps are necessary to configure .eslintrc to identify the use of 'require'?

I recently started using ESLint and successfully integrated it with IntelliJ. Initially, ESLint did not recognize node out of the box. After consulting the documentation, I created a configuration file named .eslintrc at the project's root folder, sp ...

Solving the issue of "_c is not defined" error in Vue functional component

I've been experimenting with creating functional components in Vue using the render method. Here's an example of how I attempted to do this: import Vue from "vue" const { render, staticRenderFns } = Vue.compile(`<div>Hello World</div&g ...

Is there a risk of overloading the server and browser by making constant AJAX calls at regular intervals?

I am in the process of creating a website that requires notifications. I want to use AJAX to continuously check for updates in my database where notifications are stored at regular intervals. My concern is, with multiple users all accessing the AJAX call ...

Having trouble with jQuery on my webpage

Looking for assistance with a technical issue I'm facing... I am currently working with AngularJS and have integrated jQuery into my project. However, I've encountered an issue where the jQuery code is not functioning as expected on the HTML pag ...

How to prevent all boxes in jQuery from sliding up at the same time

I am encountering an issue with 36 boxes where, upon hovering over the title, the hidden text below it should slide up. However, all 36 boxes are sliding up simultaneously instead of just the one being hovered over. Below is the script I am currently using ...