Trigger Page Scroll By Voice – noise-to-scroll

Preview:

Description:

noise-to-scroll is a vanilla JavaScript library that makes it possible to scroll down the web page by voice. Based on the Web Audio API.

How to use it:

1. Install & Import the noise-to-scroll module.

# NPM
$ npm install noise-to-scroll --save

import { nts } from 'noise-to-scroll';

2. Or include the noise-to-scroll.min.js on the web page.

<script src="dist/noise-to-scroll.min.js"></script>

3. Initialize the library and specify the scrollable container in which you’d like to scroll by voice.

const scrollElement = document.querySelector('#element');
noiseToScroll({
  scrollableContainer: scrollElement
})

4. Start the noise-to-scroll and return a Promise.

noiseToScroll({
  scrollableContainer: scrollElement
})
.start()
.then(() => {
  console.log('make some noise to scroll!');
})
.catch((error) => {
  console.log(`unable to start noiseToScroll: ${error}`);
)};

5. All default parameters:

noiseToScroll({ 
  clipLevel: 0.8,
  averaging: 0.95,
  clipLag: 150,
  scrollableContainer: window,
  scrollDebounce: 100,
  scrollMethod: 'scrollBy',
  scrollTop: window.innerHeight * 0.65
  scrollLeft: 0,
  scrollBehavior: 'smooth',
  scrollOptions: {scrollTop, scrollLeft, scrollBehavior}
})

6. Detect if the browser supports the Web Audio API.

noiseToScroll()
.detect()
.then(() => {
  console.log('browser support OK'); // ready to start
})
.catch((error) => {
  console.log(`browser doesn't support: ${error}`);
)};

7. Stop the noise-to-scroll.

noiseToScroll().stop();

8. Event handlers.

noiseToScroll()
.on('noise', (volume) => {
  // do something
})
.on('clipping', (volume) => {
  // do something
})
.on('scroll', (volume) => {
  // do something
})