The oncanplaythrough event is not functioning properly in Internet Explorer

I am facing an issue where the beep sound trigger upon receiving an API response works perfectly in Chrome and Firefox browsers, but unfortunately, it does not work in Internet Explorer.

if ($scope.totalQueueList) {
    var audio = new Audio();
    audio.src = 'rest/assets/images/beep.mp3';              
    audio.oncanplaythrough = (event) => {
    var playedPromise = audio.play();
       if (playedPromise) {
        playedPromise.catch((e) => {
          console.log(e)
        if (e.name === 'NotAllowedError' || e.name === 'NotSupportedError') {
          console.log(e.name);
        }
        }).then(() => {

    });
    }
      }
    }

I am seeking assistance on how to make this functionality compatible with Internet Explorer. Can anyone help me resolve this?

Answer №1

As per the information available on https://caniuse.com, the onplaythrough attribute is not compatible with Internet Explorer.

Nevertheless, an alternative approach would be to use addEventListener for the specific element, listening for the playthrough event (without the 'on' prefix).

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

Is it impossible to access the length property of an undefined variable?

After developing a function that calculates the length of a string entered into an HTML textbox, I encountered an error when trying to display the result in another textbox. The function is designed to get the value from the 5th textbox on my HTML page and ...

What is the best way to prevent using a function expression in order to return a local variable within an AngularJS factory?

Is there a way to return "stories" by setting "vm.stories = storyDataAsFactory.stories" instead of the current method "vm.stories = storyDataAsFactory.stories()" ? I've tried various combinations without any luck. Additionally, it seems that I can cal ...

JSON parsing throws an error due to encountering an 'unexpected end of input' issue

Here's some code I'm working with: var default_links = '{ "name" : "Google", "url": "https://encrypted.google.com/", "fav_url": "https://encrypted.google.com/favicon.ico" }\n'+ '{ "name" : "Yahoo", "url": "http://www. ...

Combine collapse and popover in Bootstrap 3 for enhanced functionality

I'm facing some issues trying to use the badge separately from the collapse feature. $(function (e) { $('[data-toggle="popover"]').popover({html: true}) }) $('.badge').click($(function (e) { e.stopPropagation(); }) ) Check o ...

JavaScript and HTML are commonly used programming languages for developing

By utilizing JavaScript, I was able to generate a table dynamically based on user input. For example, if the user enters 3 and clicks "go", a table with 3 rows is created. Using the .keyup function allowed me to target a column successfully. However, an i ...

Disabling functionality with ng-disable is not effective when used within an SVG element

I am currently developing an angularjs directive that requires a circle element to be disabled after it has been clicked once. Although the ng-click event is functioning correctly, the ng-disable feature does not seem to be working as expected. Even though ...

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

Updating data in AngularJS after inserting a new record

What is the most efficient method to update comments data when a new record is added to the database? I currently have this code that works well, but I am concerned that it may be slow if there are a large number of comments. Any assistance would be greatl ...

What could be causing the slow compilation of my Next.js pages within the app directory, and what steps can be taken to improve the speed of this

Currently, I am working on a Next.js project that uses the 'app' directory structure. However, during local development, I have been facing significant delays in compile times. Here's a breakdown of the compile times I am encountering: - Th ...

Is it possible to filter an array of data using a dropdown in Angular without using a pipe?

I am facing an issue with filtering data based on the selected dropdown item. Currently, it only filters the data once when I select a filter, and after that, it always returns an empty result. Here is an example of the code: <select class="select" (c ...

Vue-Apollo - The 'value' property is not present in the 'Readonly<Ref<Readonly<any>>>' type

MY CURRENT DILEMMA: In my quest to seamlessly integrate vue-apollo v4 with Typescript, I have encountered a challenge. I am in the process of retrieving data from a simple query using useQuery along with useResult. The default return type of useResult i ...

How can I display all categories in a Radar chart using amcharts 5

I'm currently using React with amcharts to generate a Radar chart. The data I have is structured as an array of objects like this: { category: 'Something', value: 5 }. There are a total of 12 items in the data set. However, when plotting t ...

How can you showcase templates dynamically using the ng-repeat directive in AngularJS?

Looking to dynamically display different templates in an ng-repeat directive based on the current item. The JSON data structure is as follows: data: { groups: [ { name: "Group 1", sections: [ ...

What is the best way to retrieve the latest state after applying useEffect to trigger an onChange event for an element?

I am encountering an issue with an input field in my component that requires an onChange event to update the state. Despite binding the onChange event on mounting the component, the state remains unchanged as the onChange event seems to have the initial st ...

When retrieving data from a PHP $_SESSION using an Ajax $_POST call, outdated information is being returned

I am encountering an issue that I cannot seem to figure out. Currently, my application consists of three pages: Home.php Nearmiss.php Reports.php Each of these pages includes code at the top with a specific "thispage" variable unique to that page. < ...

Error: Client was unable to process JSON data

My server setup looks like this: var http = require('http'); //Defining the port to listen to const PORT=8092; //Function that handles requests and sends responses function handleRequest(request, response){ response.statusCode = 200; ...

Extract all links from an external website

I'm attempting to extract all the URLs from a webpage using jQuery so that I can later use them with $.get(). If these URLs were located on the same page as the script, retrieving them would be easy by doing something like var links = document.getEle ...

Converting a JSON array stored in a local file to a TypeScript array within an Angular 5 project

I'm currently working on developing a web app using Angular 5. My JSON file has the following structure: [ { "id": 0, "title": "Some title" }, { "id": 1, "title": "Some title" }, ... ] The JSON file is store ...

Selective Circle Appending Techniques

I am having some issues with my bubble chart code. The data file I am working with contains instances where the GDPperCapita and/or LifeExpectancy values are either 0 or NaN, causing problems when appending circles to the chart. I would like to know if th ...

NG6002 error: This error is showing up in the imports of AppModule, even though it has its own set of issues

Running Angular 12 locally is smooth with no errors in the project build. Local Configuration: Angular CLI: 12.0.5 Node: 12.16.3 Package Manager: npm 6.14.4 OS: win32 x64 Angular: 12.0.5 However, when attempting to build the project on a Linux se ...