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

FlappingBird Postmortem (JS13K)

-
Image
FlappingBird was my Primary entry for JS13K Games competition 2020 It's about a bird flying in a forest of trees (Some of which are upside down) It started out as i was trying to draw some clouds for fun, then later i added every missing component to complete the sky First day. I planned making a game that should as well serve as a 404 page with a hidden game such that when a button is pressed It transitions into gameplay qualities were that it should be easy to play by everybody without need to master many rules Second day. There was a bunch of game ideas up my sleeves one of them was a game where a typical 404 page transitions into a green garden like mine sweeper version made up of a flowering mine field with smooth sweet sound effects Fourth day. We'll Since Mine sweeper is not a very common game there's nothing fun about it and not everyone knows how it's played. So i gave up on it and on this day i started working on backgrounds for flappingBird "the final...
Read more

JavaScript introduction to variables

-
JavaScript is a dynamically typed programming language variables are declared using the following format var `variablename` `value` instead of int integer = 100 In JavaScript a variable can accommodate any typeof value ie a variable can be assigned numbers, strings, functions, and objects. among modern browsers or in "strict mode" variables can be declared in an alternative way using const and let keywords. variable's defined this way's values can not be changed once they have been assigned. ie they are referred to as immutable. var name = "John" var lastname var year = 2020 // var age var male = true console.log( typeof name) // string console.log(typeof lastname) ///undefined console.log(typeof age) // undefined console.log(typeof year) // number console.log(typeof male) // boolean const pi  = 22 / 7 pi = undefined; // sometimes this can raise a typescript error // assignment to constant variable in strict mode console.log(pi) // 3.142...
Read more

FlappingBird JS13K Games

-
Image
FlappingBird is a Mobile side scroller game where the player controls a bird, attempting to fly between columns trees without hitting them Development of this game started out when i was attempting to draw perfect clouds programmatically on a canvas i later added a few more clouds (Something's missing) add moon, stars,  buildings and also add Gradients and for the games character i settled on a bird (using Sprite sheet obtained freely from opengameart) add more them and animated everything. FlappingBird is a single player arcade-style game in which the player controls the bird, which moves persistently to the right. The player is tasked with navigating the bird through pairs of trees that have equally sized gaps placed at random heights. the bird automatically gravitates and only ascends when the player taps the touchscreen or spacebar. Each successful pass through a pair of trees awards the player one point. Colliding with a tree or the ground ends the gamepl...
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

Zedplug will be decommissioned on November 30th

-
Greetings to each and every one of you. I am writing this letter to inform you that Zedplug will be decommissioned on November 30th. With the goal of becoming the authoritative source of Zambian music, Zedplug began development in November 2019 and was released on February 18, 2020. Since then, Zedplug has worked tirelessly to achieve its objective of being Zambia's leading music distributor. Throughout Zedplug's history, we've had our fair share of good and horrible times, but we've always been committed to keeping Zedplug up and operating. Among other notable milestones, we've had the opportunity to interact with well-known performers. Zedplug has reached the end of its life cycle. I've made my money, and I feel it's time for me to pull the plug on Zedplug. (Please permit me to serve as your master of ceremonies at this moment.) This is how the dismantling will go down. Recap from a few weeks ago: We halted our routines and refused to distribute any music....
Read more