snd-lib-browser

v1.0.1

Published

5 months ago

Downloads

152

0High
0Medium
0Low

sho_yamane

SND

Crafted UI sound assets for UX developers.

Description

With the spread of smart speakers and wireless earphones, the importance of sound in interaction design is increasing day by day. However, compared to many researches and practices in the fields of visual design and animation in interaction design, it seems that not enough knowledge has been shared about interaction design with sound, except in some fields such as games.

Interaction should not be limited to text and visuals, but should be richer than that. In order to make the intensity of interaction richer and stronger, we should have more discussion about sound.

However, in the area of interaction design, there are fewer sound designers than visual designers and programmers, and there are certainly barriers to creating sound.

To encourage UX developers to further explore discussions in the area of interaction design with sound, we have developed UI sound assets that can be used for free without worrying about licensing.

UI sound assets, developed in collaboration with multiple sound designers, are designed to fit the components used in many modern UIs. Each asset is individually designed with a different concept, so you can feel the change in texture and tone by switching the sounds.

We hope that you will use it as a resource to further refine the quality of UX for your apps, services, and products under development, and that it will help you to explore the field of sound design.

All UI sounds published on "SND" can be used for free, regardless of whether they are commercial or non-commercial. Therefore, you can use them not only for prototyping, but also for implementation in your services. *Please check the terms of use for details.

Website

snd.dev

Demo

Install

npm

$ npm install snd-lib

CDN

<script src="https://cdn.jsdelivr.net/gh/snd-lib/[email protected]/dist/browser/snd.js?kit=01"></script>

Usage

node

import Snd from 'snd-lib';

const snd = new Snd();

// Get all anchor elements.
const links = document.getElementsByTagName('a');

// Event handler for click
const onClick = (e) => {
	snd.play(Snd.SOUNDS.TAP);
}

// Load audio file
snd.load(Snd.KITS.SND01).then(() => {
	// Listen click event of all anchor elements.
	for (let i=0; i<links.length; i++) {
		links[i].addEventListener('click', onClick)
	}
})

HTML

<html>
	<head>
		<!-- Load JavaScript file from CDN -->
		<script src="https://cdn.jsdelivr.net/gh/snd-lib/[email protected]/dist/browser/snd.js?kit=01"></script>
	</head>
	<body>
		<!-- Play Button sound on click -->
		<a href="https://github.com/" class="snd__button">Link</a>
		<!-- Play Type sound on keydown -->
		<input type="text" class="snd__type" />
		<!-- Play Celebration sound on click -->
		<input type="submit" class="snd__celebration" value="Submit" />
	</body>
</html>

API

Snd Class (extends EventEmitter)

note

You need to initialize Web Audio API from pointer event at first.
This library adds a click event listener to window to initialize Audio Context.
By setting the preloadSoundKit option to null when create an instance and call the load method manually, you can wait for the sound kit to load

constructor

new Snd(options: SndOptions);

SndOptions

| name | type | default | description | | ---------------- | ------- | ------- | ------------------------------------- | | easySetup | boolean | true | If this option is set to true, Snd will automatically add event listeners to the HTML Elements with "snd__[sound key]" classes. | | muteOnWindowBlur | boolean | true | If this option is set to true, Snd will fade out the audio volume when browser or browser's tab becomes inactive. | | preloadSoundKit | null | string | null | Sound Kit key to pre load. |

PlayOptions

| name | type| default | description | | ---------------- | --------------------- | ------- | ------------------------------------- | | loop | boolean | false | whether loop or not | | volume | number | 1 | Audio volume | | delay | number | 0 | Delay time (second) | | duration | number | -1 | Playing duration (second). If this is set to -1 the playing duration will be the original sound duration. | | callback | (id: number) => void | () => {} | Callback function that will be called when the sound complete playing. |

static properties

CHANGE_SOUND_KIT: string static readonly

Event name which will be triggered when a sound kit has changed

SOUNDS: {[key: string]: string} static readonly

An object that contains all keys of the sound types. (ex: "Button", "Tap")

KITS: {[key: string]: string} static readonly

An object that contains all keys of sound kits.

masterVolume: number static

master volume

methods

load(kitKey: string): Promise

Load sound kit

|arg|type|description| |-|-|-| |kitKey|string | Key of the sound kit. You can pass the value using Snd.KITS object. |

play(soundKey: string, options?: PlayOptions): void

Play sound

playTap(options?: PlayOptions): void

Play Tap sound

playSwipe(options?: PlayOptions): void

Play Swipe sound

playType(options?: PlayOptions): void

Play Type sound

playButton(options?: PlayOptions): void

Play Button sound

playCaution(options?: PlayOptions): void

Play Caution sound

playCelebration(options?: PlayOptions): void

Play Celebration sound

playDisabled(options?: PlayOptions): void

Play Disabled sound

playNotification(options?: PlayOptions): void

Play Notification sound

playProgressLoop(options?: PlayOptions): void

Play ProgressLoop sound

playRingtoneLoop(options?: PlayOptions): void

Play RingtoneLoop sound

playSelect(options?: PlayOptions): void

Play Select sound

playTransitionUp(options?: PlayOptions): void

Play TransitionUp sound

playTransitionDown(options?: PlayOptions): void

Play TransitionDown sound

playToggleOn(options?: PlayOptions): void

Play ToggleOn sound

playToggleOff(options?: PlayOptions): void

Play ToggleOff sound

stop(soundKey: string): void

Stop all sounds with a specific sound key.

|arg|type|description| |-|-|-| |soundKey|string | Key of sound. You can pass the value using Snd.SOUNDS object. |

mute(): void

Mute

unmute(): void

Unmute

properties

kit: string

Currently selected sound kit key.

isMuted: boolean

Muted or not.

isWindowBlurred: boolean

Browser window is blurred or not.

Events

CHANGE_SOUND_KIT

Triggered when the sound kit has change.

Sounds

Sound Kit

| name | key | author | | ---------------- | --- |----------------- | | SND01 "sine" | 01 | Yasuhiro Tsuchiya | | SND02 "piano" | 02 | Ayako Taniguchi | | SND03 "industrial" | 03 | INDUSTRIAL JP |

key

Sound key is required to call play() and stop() method.

import Snd from "snd-lib";
Snd.SOUNDS

| name | description | | ---------------- | ----------------- | | button | Unlike Tap sound, this sound is played to clearly indicate to the user that they have pressed a UI element that performs a specific function, such as a button. In combination with visual effects, it can provide the user the feeling that they have definitely pressed a specific button. | | caution | A caution sound. This sound is played to indicate to the user that something is wrong, has a slightly more negative sound than Notification. | | celebration | This is a sound to celebrate the moment when user have achieved the biggest goal of each application. For example, when user send an email in an email app, or when user has checked the last task in a task management app. It creates a climax in the app's UX. | | disabled | This sound is played when you press a disabled button. The sound is not as strong as the Caution sound described below. The sound is simply to indicate that the button itself is invalid. | | notification | Notification sound. This sound is played to alert the user when there is some kind of notification from the app. | | progress_loop | This sound is played to clearly indicate that some task is being processed, such as loading, dragging, etc. It is designed to be played in a loop while the task is running. After the task is completed, it is a nice to play a sound to indicate that the work has been completed according to the type of task. However, if the processing time is expected to be very long, or if the processing occurs frequently, the sound will be played all the time, so consider carefully which task to assign the sound to. | | ringtone_loop | This is the sound with the highest level of alert compared to Notification and Caution. It is designed to be played in a loop until the user takes action. It is intended to be used as a ringing sound or alarm sound. | | select | This sound is played when a specific UI element is selected such as a checkbox, radio button, choice chip, or input form. In combination with visual effects, it can be used to create a responsive feeling to the user that they have definitely selected a specific element. | | swipe | This sound is played when a user swipes or presses the pager button to make a horizontal-transition. Since program would play the sound frequently, we have prepared five different sounds with the same tone but slightly different sound. By randomly playing these sound for each user action, it enables interface to reduce the discomfort of hearing the same sound repeatedly. | | tap | This sound is played to indicate to the user that the program recognized the user's action such as tapping or clicking on the screen.Since program would play the sound frequently, we have prepared five different sounds with the same tone but slightly different sound. By randomly playing these sound for each user action, it enables interface to reduce the discomfort of hearing the same sound repeatedly.This sound is only for the purpose of making the user "feel responsive". For UI elements that have certain functions assigned such as buttons, be sure to assign appropriate sound from the following sound assets. | | toggle_on / toggle_off | This sound is played when a UI that clearly indicates two states, "ON" and "OFF", such as a toggle switch, is activated. The sound is designed to correspond to the ON and OFF states, from low to high when it is ON, and from high to low when it is OFF. By properly assigning the ON and OFF sounds, it enables users to clearly notice the toggle switch has enabled or disabled some function. | | transition_down / transition_up | Unlike Swipe sound which is for horizontal-transition within the same hierarchy, this is a sound is played when a hierarchical-transition is made by a modal window, etc., As with Toggle sounds, there are OPEN and CLOSE sounds. By assigning them appropriately to modal opening and closing, hierarchical transitions can be notified to the user properly. | | type | This sound is played to provide feedback to the user when typing text. For the sound to be played repeatedly during keystrokes, we have prepared five different sounds with the same tone but slightly different. By randomly playing these sound for each user input, it enables to reduce the discomfort of hearing the same sound repeatedly. |

HTML Class names for easy setup.

If the easySetup option is set to true, Snd will automatically play sound for HTML Elements with classes below.

| name | compatible elements | event | | ---------- | -------- | ---------- | | snd__button| any | click | | snd__caution | any | click | | snd__celebration | any | click | | snd__disabled | any | click | | snd__notification| any | click | | snd__select| select, input(type="radio") | change | | snd__tap | any | mousedown, touchstart | | snd__toggle| input(type="checkbox") | change | | snd__transition_down | any | click | | snd__transition_up | any | click | | snd__type| textarea, input(type="text,email,number,password,search,tel,url") | keydown |

License

The source code is licensed under the terms of the MIT license. The audio materials included may be used free of charge, but the copyright and all other intellectual property rights of the audio files belong to the credited sound designer (author). See https://snd.dev/ for the details.

Contact

Dentsu Customer Experience Creative Center conducts research and development on sound for better user experience, please feel free to contact us for UI sound development requests, consultations on sound-related projects, requests for lectures, and requests for interviews.

[email protected]

Author

DENTSU INC. STARRYWORKS inc.