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 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

JavaScript intro to classes

-
Classes are objects 'functions which introduce inheritance parent child relationship in JavaScript it promotes code reusability which reduces the amount of code in a JavaScript application. JavaScript class decelerations start with keyword class proceeded by class name with a class body having a constructor along with methods for instance class human {     constructor(name) {          this.name = name;          this.gender = null;     }     great() {         return "Greetings " +         (this.gender == "male") ? "mr " : "mrs " + this.name     } } Child classes are created by adding the keyword extends followed by the parent class name and parent class methods can be called using the syntax super.+"method name"(parameters) class man extends human {   ...
Read more

Tar basic commands to store and extract files

-
Targeted is an archiving program designed to package, store, and compress multiple files into a single portable package the name tar is an abbreviation for tape archiver Apart from creating .tar archives tar is also capable of compressing files using zip, bzip2, and gzip compression algorithms Tar flags c — compress directive x — extract directive t — tabulate contents f — specify filename z — use zip/gzip compression j — use bzip2 compression k — do not overwrite t — files from file w — ask for configuration v — verbose gzip flags d — decompress file Tar commandline commands syntax tar -{arguments} {params} Example tar commands tar -cf music.tar music.mp3 Tar archiver will be directed to compress music.mp3 into a tar archive named music.tar and save it in the current working directory tar -xf music.tar Tar will be directed to extract music.tar archive and save the constituent contents of the archive...
Read more

Snake monochrome (JS1024)

-
JS1024 is an annually held code golfing competition where you're basically required to create something creative in 1024 bytes or less of raw "JavaScript/HTML/WebGL" I participated for JS1024 2020 competition with my First entry titled "Snake monochrome" Originally inspired by the old Nokia game going by the same name "Snake" which i used to play as far back as 2007-2008 Another entry making it Second is named "Tetris monochrome" i was compiled to do this game as a dare from my Girlfriend on June 6 the "Tetris 1984" anniversary Third one is F1-racer it's inspired by my bestfriend who wasn't impressed with how i hooked up controls on "Tetris Monochrome" so he requested "i modify controls a bit", and i improved "input/output" by adding smooth touch input to it as requested Snake game contains two entities. The Snake and the Apple, the Snake is an Object with properties position (vect...
Read more