The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent. However, if the audio is not muted, it will play each time the user clicks on a navigation link before redirecting.

This is a snippet of my HTML code:

<a href="javascript:void(0)"><span id="facebook" onclick="playLink(this.id)">facebook</span></a>

And here is a glimpse of my JavaScript code:

function playLink(id)
{
  if(audio1.muted==true && id=="facebook")
  {
    window.location.href="https://www.facebook.com/?stype=lo&jlou=AfdeVGNZ2wkOmLR2JKTDO5TQxnERQXFcGGG5gBl3mieEaFJq-_rbey251tojJmP3jetCtclLhIYstrSsHlonyLoa&smuh=44193&lh=Ac_NtNBBW6lW7Cwg";
  }
  
  if(audio1.muted==false && id=="facebook")
  {
    audio1.play();
    alert("1");
    if(audio1.ended)
      window.location.href="https://www.facebook.com/?stype=lo&jlou=AfdeVGNZ2wkOmLR2JKTDO5TQxnERQXFcGGG5gBl3mieEaFJq-_rbey251tojJmP3jetCtclLhIYstrSsHlonyLoa&smuh=44193&lh=Ac_NtNBBW6lW7Cwg";
  }
}

The issue I am facing is that the background sound plays and navigates successfully only after adding an alert following audio1.play(). Without the alert, the sound plays but fails to navigate to the linked page. How can I resolve this?

Your assistance would be greatly appreciated. Thank you!

P.S: The "a" element is a part of the bootstrap nav bar.

javascriptcsshtmlaudio

Answer №1

Here is a code snippet that utilizes the setTimeout function for creating a time lapse:

if(audio1.muted==false && id=="facebook")
{
  audio1.play();
  
  setTimeout(function(){
    if(audio1.ended){
      window.location.href="https://www.facebook.com/?stype=lo&jlou=AfdeVGNZ2wkOmLR2JKTDO5TQxnERQXFcGGG5gBl3mieEaFJq-_rbey251tojJmP3jetCtclLhIYstrSsHlonyLoa&smuh=44193&lh=Ac_NtNBBW6lW7Cwg";
    }
  }, 200);
}

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

Maintain the structure of ajax POST requests and display a real-time feed of

I've been developing an openvz script to run virtual machines at home. I've been exploring JavaScript and AJAX functions to send post requests, which are then displayed in the innerHTML section of my webpage. However, I've encountered an iss ...

javascriptphpjqueryajax

Easily adjust the width of divs within a parent container using CSS for a seamless and uniform

I am designing a webpage where I have set the container width to 100% to cover the entire screen width. Inside this container, I have multiple DIVs arranged in a grid structure with a float: left property and no fixed width, just a margin of 10px. Is ther ...

jqueryhtmlcss

I am a beginner in node.js and currently exploring the concept of asynchronous callbacks and how they function

When running the following code, "one" and "two" are displayed as output but "three" is absent. Can someone provide an explanation as to why "three" is not showing up in the output? Despite trying various methods, I am still unable to pinpoint the cause ...

javascriptnode.js

What is the best way to include the title "addmoves" to the server using AngularJS?

https://i.sstatic.net/yR2fk.png Furthermore, I am looking to include a button that allows users to add additional movies. The goal is to input multiple sets of data simultaneously, such as: newMovies = [ { movieName:"", director:"", release ...

javascriptangularjs

Enzyme locates and chooses the initial occurrence of an element

I am attempting to simulate a click on the initial box out of three. My React script appears as follows: const Boxes = (props) => { return ( <div className="container"> <div onClick={props.showMessage} className="box">One& ...

javascriptreactjsenzyme

I struggle with managing a z-index in conjunction with an absolute position

Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...

css

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

htmlcss

Looking to modify the styling of links in an unordered list?

Let me explain what I attempted to accomplish CSS: li:nth-child(2n) { background-color:gray; } HTML: <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> ...

htmlcss

Prevent running function bodies simultaneously based on user events in JavaScript until a previously triggered execution is completed

When a user clicks on a button in my component, the doSomething function is activated. The issue I am facing is that doSomething takes between 200-1100ms to finish execution and change state. What complicates matters is that when the button is clicked rapi ...

javascriptreactjsasync-await

What is the best method to display the content in the second response for ajax's authorization and dealing with cors?

I have successfully implemented basic authorization and enabled CORS on my VPS. Check the CORS preflight request using cURL: HTTP/1.1 200 OK Date: Sat, 15 Sep 2018 08:07:37 GMT Server: Apache/2.4.6 (CentOS) Access-Control-Allow-Origin: http://127.0.0 ...

javascriptphpjqueryajaxcors

Troubleshooting problems with the guildMemberAdd event handler

As I continue on my journey with discord.js v12, I've encountered yet another issue with an event handler. While most events have been working fine so far, such as message or ready, I am currently facing a challenge with guildMemberAdd event. My goal ...

javascriptnode.jsdiscorddiscord.js

On production, Heroku fails to load JavaScript files, only allowing CSS files to be loaded. However, the files load successfully when

I've been struggling to find a solution to my problem, so I'm reaching out for some help. I am in the process of deploying my node (express) app to Heroku, but I've encountered an issue where only CSS files from my public folder are being t ...

javascriptnode.jstypescriptexpressheroku

Eliminate the space between the navigation bar and carousel when using Materialize with Vue.js and Laravel

I am facing an issue with the gap between the navbar and carousel in my materialize design. I have implemented Vue components for each div and Laravel as the backend. Using Sass for CSS preprocessing, I attempted to adjust the margins for the body, navbar, ...

csslaravelvue.jssassmaterialize

What is the best way to connect a series of checkboxes within a form utilizing Angular?

I created a form with checkboxes that allow users to select multiple options. However, when I submit the form, instead of receiving an array of objects representing the checked checkboxes, I'm not getting anything at all. Here is what I see in the co ...

javascriptangulartypescript

Displaying incorrect results within the div container

I have been developing a website where a div element on a specific page displays values from a PHP file. Below is the PHP code responsible for rendering the information on the HTML: $output .= ' <div class="row text-left col-md-3 ...

phphtmlcss

Having trouble displaying Vue Toast messages?

I have been trying to incorporate a toast message into my code, but unfortunately, the message does not appear and there are no errors in the console. The code functions properly and the invitation is sent successfully. I have used similar code in other fi ...

javascriptvue.jstoast

Is there a method for viewing or manipulating an object within a JSON file?

Could someone please assist me in accessing the total sum displayed in the chart using console.log? I have tried setting it using "var item": "[[value.sum]]", but it did not work. Any help is appreciated. var chartData1 = []; generateChartData(); func ...

javascriptjsonamcharts

Can you identify the attribute used for marking up an HTML code tag?

While examining a website's code to understand how they styled a specific section of their page, I came across the following snippet: <code markup="tt"> I thoroughly checked for any other references to this particular markup attribute ...

htmlcss

Ways to guarantee a distinct identifier for every object that derives from a prototype in JavaScript

My JavaScript constructor looks like this: var BaseThing = function() { this.id = generateGuid(); } When a new BaseThing is created, the ID is unique each time. var thingOne = new BaseThing(); var thingTwo = new BaseThing(); console.log(thingOne.id == ...

javascriptinheritanceprototype