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

how to dump a postgresql database using from the terminal

-
PostgreSQL is a relational database management system and arguably the best database management around. postgreSQL comes with utilities used to manipulate databases from the terminal "psql" being the most popular utility I'm sure you've read somewhere or used "psql" dumping "backing" databases is done using PostgreSQL's pg_dump utility In your terminal type; pg_dump <database name> > <output> For instance to backup a database named "books" to a file named "books.sql" do; pg_dump "books" > books.sql How to exclude database data from backups To exclude database data from your output file you should include "-s" flag in your command pg_dump -s "books" > books.sql
Read more

How to get user's ip address in JavaScript

-
An IP address is a unique numerical label given to a computer when connected to a network; ipify.org is a free service that retrieves IP addresses in JSON format fetch('https://api.ipify. org ?format=json') .then(response => response.json()) .then(response => console.log(JSON.stringify(response))) // response {"ip":"--.---.---.---"} In nodejs you can use a package node-fetch Install it by typing; npm i node-fetch Or using curl, in your terminal type; curl 'https://api6.ipify.org?format=json' // response {"ip":"--.---.---.---"}
Read more

How to set content disposition header for nginx server to force content download

-
Image
Nginx (pronounced as engine x) is an HTTP server, reverse proxy server, as well as a mail proxy server Nginx is well known for its high performance, stability, efficiency, rich feature set, simple configuration, and low resource consumption. content disposition headers direct web browsers to save content instead of attempting to render it To set content disposition open your desired server configuration in "/etc/nginx/sites-available/" within your configuration add code below within your server {block} location ~* (mp3|ogg|wav)$ {     add_header Content-Disposition "attachment"; } mp3, ogg and wav are example file extensions matched by regular expressions rules Test configuration by acessing mp3, ogg and wav files from your webserver Alternatively you can force custom filenames as shown below "$1" substitutes filenames sent to clients. As an example its value corresponds to the requested file's extension lo...
Read more