How to resume a suspended web audio api context

-
A quick JavaScript function to maneuver around Google chrome, Firefox and safari web audio context suspension state

Starting from chrome v{xx} Google chrome, Mozilla Firefox and Apple safari web browsers automatically suspend html5 web audio contexts if they start without any user gesture they can only be resumed by a user gesture it's a measure implemented to improve overall user experience.

context.state property stores the state of the audio context when it's suspended it's value changes to "suspended".
in order to implant a maneuver first check the state of the context should it be suspended literate an array of events for each add an event listener on the document body and remove the event if one of the events has been triggered by the user

let unlockAudio = function(context) {
    if (context.state === 'suspended') {
        let events = ['touchstart', 'touchend', 'mousedown', 'keydown']
        let unlock = function() {
            events.map((event) => {
                document.body.removeEventListener(event, unlock)
            })
            context.resume()
        }

        events.map((event) => {
            document.body.addEventListener(event, unlock, false)
        })
    }
}

Comments

Post a Comment

Popular posts from this blog

JavaScript math constants

-
In JavaScript Math is a global object with mathematical functions and constants. Math object is extendible. for instance to make a function to calculate cuboid of a given number. Math['cuboid'] = function(number) {     return number * number * number } or defining a constant Math['some_constant'] = value; You can use your new function like any other function ie console.log(Math.cuboid(3)) // returns 27 console.log(Math.some_constant) // returns value Math.E Euler's constant and the base of natural logarithms; console.log(Math.E) // returns 2.718281828459045 Math.LN2 Natural logarithm of 2; console.log(Math.LN2) // returns 0.6931471805599453 Math.LN10 Natural logarithm of 10; console.log(Math.LN10) // returns 2.302585092994046 Math.LOG2E Base 2 logarithm of E; console.log(Math.LOG2E) // returns 1.4426950408889634 Math.LOG10E Base 10 logarithm of E; console.log(Math.LOG10E) // returns 0.4342944819032518 Math.PI Ratio of the...
Read more

How to use canvas context rect method for drawing rectangles

-
canvas context rect method does as it says. It's used for drawing a rectangle on a canvas context Parameters context.rect(positionX, positionY, Width, Height) PositionX specifies the x coordinate at which the rectangle should be drawn at on the context PositionY specifies the y coordinate at which the rectangle should be drawn at on the context Width specifies the width of the rectangle Height specifies the height of the rectangle Stroking and filling the rectangle In order for the rectangle to be actually visible you have to either stroke it or fill it with a color. Stroke Stroking a rectangle means to draw a line that joins all of it's vertices To specify the fill color you should set it and call stroke to draw context.strokeStyle = "#colors" context.stroke() Fill Similar to srokings filling a rectangle means to paint it's inner bounding box with a specified color context.fillStyle = "#colors" context.fill() Example context.rect...
Read more

JavaScript canvas introduction

-
Introduction Probably next monday I will post a how to make a snake game clone in a few lines of JavaScript code post don't miss it out subscribe to my email newsletter! What is a canvas I'm sure you've heard of the term somewhere. canvas through their "2d" context allow drawing 2d graphics using a simple JavaScript api You can use a canvas to draw text , lines simple shapes, and images canvas can also be used as a renderer for JavaScript built html5 games "that's were we're going" Example on canvas it draws a rectangle on a canvas context black color by default <html> <canvas id="canvas"></canvas> <script type="text/javascript">         var context = canvas.getContext("2d") // stroke a 100px square at 0, 0 context.rect(0, 0, 100, 100) context. stroke () </script> </html> Save and open it in your browser you should see a square on the top right corner of your bro...
Read more

How to target all elements of a given class name in JavaScript

-
JavaScript getByClassName only targets one element by default Workarounds  "loops " Loops can mess up your code I personally don't like them. To target all elements you will have to iterate through all of them for each element you will have to add a event listener Example For instance the are 3 links of a same class and you want to add event listeners on all of them .... .... .... // JavaScript const links = document.getByClassName("links") for(var i = 0; i < links.length; i++) links[i].addEventListener('click', event => console.log(event.target.get attribute('class')))
Read more

E2020 dynamic imports in JavaScript

-
Escmascript Is a standard from which JavaScript and typescript are both derived from. ES2020 is out it comes with it new ways of writing JavaScript code. Dynamic imports enable importing dependencies in a rather dynamic way. Initially JavaScript developers were restricted to statically load their dependencies for instance; import { property } from 'dependency' On runtime the JavaScript engine loads the required dependencies and makes them accessible globally. However that is a rigid way of writing code. Dynamic imports are  relatively more flexible therefore you can included them at any segment within your program. For instance if you want to load file system module only if a certain criteria is met you would do as follows; If(process.argv[2] == 'start') Import fs from 'fs' Dynamic imports return a promise use the syntax below to make use of them import('fs') .then(fs => {    // consume module fs })
Read more