JS Sound: Play sounds when events happen on page elements

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 139 All time: 357 This week: 14Up
Version License JavaScript version Categories
jssound 1.0GNU General Publi...5Audio, Events
Description 

Author

Dave Norminton

This object can play sounds when events happen on page elements.

It can listen to events on given page elements and play given sounds when those events happen.

The object can match elements to listen to the given events by class or id selectors.

It can play sounds of multiple alternative formats depending on what each browser supports.

Innovation Award
JavaScript Programming Innovation award winner
April 2017
Winner		 Many sites need to call to the attention of the users when certain events occur. Playing sounds is one of the ways to achieve that.

This object can play sounds as result of events that may occur due to user interactions.

Manuel Lemos
Picture of Dave Norminton
  Performance   Level  
Name: Dave Norminton <contact>
Classes: 3 packages by
Country: United Kingdom
Age: ???
All time rank: 1236 in United Kingdom
Week rank: 6 Up1 in United Kingdom Up

Level 2 StarStar

 Innovation award
Innovation award
Nominee: 1x

Winner: 1x

Example

<!doctype html>
<html>
<head>
    <title>JsSound</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <div class="wrapper">
            <h1>JsSound</h1>
        </div>
    </div>
    <div class="row">
        <div class="wrapper">    
            <p>
            A basic default example with a click event.
            </p>     
            <div id="click" href="#">Click me for sound</div>
            <code class="block">
             var sound0 = new JsSound('id', 'click', ['sound/crash1.wav', 'sound/crash1.mp3']);           
            </code>
        </div>
    </div> 
    <div class="row2">
        <div class="wrapper">    
            <p>
            An example using multiple targets with the same class.
            </p>   
            <span class="clank">Sound on class - click me</span>
            <span class="clank">Sound on class - click me</span>
            <span class="clank">Sound on class - click me</span>
            <code class="block">
             var sound1 = new JsSound('class', 'clank', ['sound/clank.wav', 'sound/clank.mp3']);            
            </code>
        </div>
    </div>
    <div class="row">
        <div class="wrapper">  
            <p>
            An example using the optional fourth parameter, which specifies what type
            of event to listen for, rather than the default click action.
            </p>              
            <div id="box">
            <span>On mouseover and mouseout produce different sounds<span>
            </div>
            <code class="block">
            var sound2 = new JsSound('id', 'box', ['sound/crash1.wav', 'sound/crash.mp3'], 'mouseover');<br />
            var sound3 = new JsSound('id', 'box', ['sound/clank.wav', 'sound/clank.mp3'], 'mouseout');           
            </code>
    </div>
    <div class="row2">
        <div class="wrapper">    
            <p>
            JsSound on the third parameter accepts either an array of files to use ( each
            of these should be of the same sound but different formats, in order to provide
            a wider range of browser matches). This example shows a string being used.
            </p>
            <div id="single">Single sound</div>
            <code class="block">
            var sound4 = new JsSound('id', 'single', ['sound/clank.wav', 'sound/clank.mp3']);           
            </code>
        </div>
    </div>    
</body>
<script src="js-sound.js"></script>
<script>
var sound0 = new JsSound('id', 'click', ['sound/crash1.wav', 'sound/crash1.mp3']);
var sound1 = new JsSound('class', 'clank', ['sound/clank.wav', 'sound/clank.mp3']);
var sound2 = new JsSound('id', 'box', ['sound/crash1.wav', 'sound/crash.mp3'], 'mouseover');
var sound3 = new JsSound('id', 'box', ['sound/clank.wav', 'sound/clank.mp3'], 'mouseout');
var sound4 = new JsSound('id', 'single', ['sound/clank.wav', 'sound/clank.mp3']);
</script>
</html>

Details

<h1>JsSound</h1> <p> JsSound makes it very simple to attach sound events to elements. JsSound can be used on either class or id selectors, can take either a file name as a string or to accomodate different browsers can accept an array of different files. </p> <p> JsSound will detect the capabilities of the browser and as long as the correct format is supplied will use that format. <p> <code> npm run-script build </code>


  Files folder image Files (12)  
File Role Description
Files folder imagedist (3 files)
Files folder imagesrc (2 files)
Accessible without login Plain text file index.html Example Example
Accessible without login Plain text file package-lock.json Data Auxiliary data
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file style.css Data Auxiliary data
Accessible without login Plain text file tsconfig.json Data Auxiliary data
Plain text file webpack.config.js Class Class source

  Files folder image Files (12)  /  dist  
File Role Description
  Plain text file bundle.js Class Class source
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files (12)  /  src  
File Role Description
  Accessible without login Plain text file index.pug Data Auxiliary data
  Plain text file index.ts Class Class source

Downloadjssound-2021-12-03.zip 58KB
Downloadjssound-2021-12-03.tar.gz 2KB
 Version Control Unique User Downloads Download Rankings  
 100%
Total:139
This week:0
All time:357
This week:14Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.