How to change sound volume using webAudio api gain property

-
A quick function to adjust html5 web audio gain value or "audio volume"
sound gain value is controlled by creating a gain node and setting it's gain value 0-1

where 0 is the lowest value 1 is the maximum gain value 

let sound = function sound(url, params) {
    // params
    let loop = params.loop;
    // make a context
    let audioContext = new (window.AudioContext || window.webkitAudioContext)();
    let source = audioContext.createBufferSource();

    let gainNode = audioContext.createGain()
        gainNode.gain.value = 0.05 // sound percentage

    let request = new XMLHttpRequest();
request.open('GET', url, true);

    request.responseType = 'arraybuffer';
    request.onload = function() {
            audioContext.decodeAudioData(request.response, function(buffer) {
            source.buffer = buffer;
            
            gainNode.connect(audioContext.destination)
            source.connect(gainNode)
            source.loop = loop;
            source.start(0);

        }, (e) => {
            throw new Error('Audio error! ', e);
        });
    }

    request.send();
}

Comments

Post a Comment

Popular posts from this blog

How to draw clouds on HTML5 Canvas

-
Image
So basically clouds are shapes with a flat bottom and 3 curves on top (two on the sides on bigger one on the middle) As i was creating a JS13K Game i wondered around googling if i'd find something as simple as that and 'i couldn't find anything interesting So i took some pictures of simple animated clouds and sketched it on my notepad trying to reverse engineer shapes in the figure In my first attempt i discovered that "the base is something similar to css pills, so there's rectangular shape with roundish edges and a circle overlay on top". Putting that into vanilla JavaScript i resorted to creating two canvases 1. foreground layer 2. background layer Clouds are drawn using a solid color formed by four shapes 3 circles and a rectangle then using some alpha the resultant image is then overlay-ed onto the primary canvas. Here's an example It's a sneaky way todraw clouds so they got to be a cleanway todo this without Jumping extra hoops Last reso...
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

How to use fetch api submit an html form

-
Fetch api allows asynchronous means of reading files and a more simplified way of making http requests in JavaScript. How to submit an existing html form using fetch api; Assuming you have html source code with a form and some input fields; <form id="form" action="./submit" method="post" onsubmit="handle(event)"> <input name="query"> <button>     submit </button> </form> You can pass an instance of a dom form to formData constructor as the first parameter; const handle = function(event) {     event.preventDefault()     const data = new formData(event.target) fetch('//localhost/api/post', {     method: 'POST',     body: data }) } Fetch api returns a new pending promise to process the response you will need to await asynchronous process once ready to consume parse it as follows; .then(response => response.json()) .then(response => console.log(response))
Read more

Get current url port, hostname and path in JavaScript

-
window.location is an Object with properties of current location namely window.location.href  returns the href url of the current page window.location.hostname  returns the domain name window.location.pathname  returns the pathname segment of the url window.location.protocol  returns the web protocol of the url window.location.assign ()  loads a new document
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