rariasense

rariasense

Enhance user interaction through precise mouse tracking.

Pitch

RariaSense is a powerful tool that enables precise mouse tracking to enhance user interaction and engagement on web applications. With simple integration and intuitive functionality, developers can gain insights into user behavior and improve the overall user experience.

Description

RariaSense is a lightweight and powerful JavaScript library designed to enhance web experiences by adding interactive sound effects triggered by mouse hover over HTML elements. This library is perfect for creating immersive and engaging web interfaces.

Key Features

Sound Playback on Hover: Trigger audio playback when the mouse hovers over specific elements.
Element-Specific Customization: Easily configure different sounds and delays for individual elements using data-* attributes.
Global Configuration: Set default sounds and settings applicable to all elements.
Dynamic Element Support: Dynamically add new elements and refresh the library using the refresh() method.
Automatic Pause on Tab Change: Sounds automatically pause when the browser tab is not in focus, enhancing user experience.
Volume Control: Adjust the global volume of sounds across the application.
Configurable Delay: Specify a delay time before the sound plays on hover.
Loop Support: Continuous sound playback is supported for background music or effects.
Efficient and Light: Built with pure JavaScript, no dependencies required.

Quick Usage Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>RariaSense Demo</title>
</head>
<body>
    <button class="raria-item" data-sound="hover.mp3">
        Hover Over Me
    </button>

    <script src="rariasense.js"></script>
    <script>
        new RariaSense({
            selector: ".raria-item",
            volume: 0.6
        });
    </script>
</body>
</html>

API Documentation

Constructor

const raria = new RariaSense(options);

Configuration Options

Option	Type	Default	Description
`selector`	`string`	`.raria-item`	CSS selector for elements that will trigger sound on hover
`sound`	`string`	`""`	Default sound for elements without `data-sound`
`delay`	`number`	`0`	Delay before sound playback in milliseconds
`volume`	`number`	`1`	Global volume level (0 to 1)
`loop`	`boolean`	`false`	Enables continuous sound looping
`stopOnLeave`	`boolean`	`true`	Stops sound when the mouse leaves the element
`pauseOnHidden`	`boolean`	`true`	Pauses sound when the browser tab is hidden

Data Attributes for Customization

Customize individual elements with data-* attributes:

<button 
    class="raria-item" 
    data-sound="sound.mp3" 
    data-delay="500">
    Click Here
</button>

Public Methods

refresh()

Updates the list of elements and reapplies settings, useful when adding dynamic elements.

raria.refresh();

Use Cases

Web Games: Add immersive sound feedback to enhance gameplay experiences.
E-commerce: Utilize sound effects when users hover over product items.
Web Applications: Provide audio feedback for buttons and interactive elements.
Portfolios: Create compelling and delightful experiences for users.
Dashboards: Implement sound feedback for user interactions.
Multimedia Galleries: Enhance content exploration with sound.

Advanced Configuration

Different Volume Settings

const raria = new RariaSense({
    selector: ".item",
    volume: 0.5  // Global volume
});

// Set specific volumes for individual elements
document.querySelectorAll(".item").forEach(el => {
    if (el._rariaAudio) {
        el._rariaAudio.volume = 0.8;  // Specific volume for this item
    }
});

Selective Playback

const items = document.querySelectorAll(".raria-item");

// Play sound of a specific element
const audio = items[0]._rariaAudio;
if (audio) audio.play();

Notes

Browser Compatibility: RariaSense works with modern browsers supporting the Web Audio API.
Local Processing: All audio processing is handled in the user's browser, ensuring data privacy.
Automatic Playback Restrictions: Some browsers may block automatic audio playback; the library manages this gracefully.

0 comments

No comments yet.

New comment