haptic-player - A Javascript Haptic Audio Player by YALL

February 15, 2024 · View on GitHub

A simple vanilla javascript tool to enable haptic connection and playback with any audio file.

Support The Project

If you find this project helpful, you can support us via Patreon! Every donation helps me build more!

About the player

This script adds a number of additional HTML elements to the page, loads in a funscript for each <audio> element and then syncs the playback with the haptic script. It can display visual representations of the data, both as a whole, and also as a zoomed in panel showing current haptic strength. The whole-haptic charts is also clickable allowing scrubbing to parts of the track.

How to use - for site visitors

Your visitors will need to download and install Intiface Central https://intiface.com/central/ - This is available for PC/Mac and Android as well as iOS - although there are know issues with the iOS implementation. The app is available in Google Play and Apple App stores.

They must run Intiface Central - Click the big PLAY button, pair their devices (under devices) - and then simply refresh the browser and play the audio track.

How to use - for developers

For a basic player all you need to do is include the scripts and update your audio players with data-funscript="/path/to/my.funscript". This will allow the javascript to detect and update the player element, load the funscript and set up event listeners.

1) Include the required scripts

These can go in <head> or <body> and should be included on any page where you show haptic settings, play haptic files or display "device connected" messages.

<script src="/dist/buttplug.min.js"></script>
<script src="/dist/haptics.js"></script>

2) Add a Haptic connection message (optional)

This will show Haptic device(s) connected: • Device name

<div id="haptic_status"></div>

3) Update your audio players

Simple version:

<audio controls data-funscript="/path/to/yourfile.funscript">
  <source src="/path/to/yourfile.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Advanced version of the player - show chart and (soon) a zoomed display of current haptics:

<audio data-showchart="1" data-showzoom="1" data-funscript="/path/to/yourfile.funscript" controls>
  <source src="/path/to/yourfile.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

4) Start the Haptics system

<script type="text/javascript">window.startHaptics();</script>

The startHaptics() function takes 2 optional params startHaptics(querySelector, settings)

  • querySelector : default audio[data-funscript] - Allows you to adjust which audio players get selected for haptic integration
  • settings : default {} - for overriding system settings - See below
  • hapticFrameRate : default 8 - how often should data be passed to the device per second - recommend under 10
  • drawDeviceStrength : default false - whether to show a slider with current haptic strength %
  • drawHaptic : default false - whether to draw the haptics on screen as a chart
  • drawHapticWidth : default 1600 - width of haptic display, for aspec ratio calcs
  • drawHapticHeight : default 150 - height of haptic display, for aspec ratio calcs
  • drawHapticZoom : default false - whether to draw the haptics in progress showing upcoming intensity
  • drawHapticZoomWidth : default 1600 - width of haptic zoom display, for aspec ratio calcs
  • drawHapticZoomHeight : default 300 - height of haptic zoom display, for aspec ratio calcs
  • drawHapticZoomBefore : default 2 - Haptic zoom timeframe - Number of seconds before current play point
  • drawHapticZoomAfter : default 8 - Haptic zoom timeframe - Number of seconds after current play point
  • chartStyle : default 'fill' - either line or fill
  • chartProgressLineThickness : 3 - thickness of line showing position
  • chartLineThickness : default 3 - thickness of chart line - if line selected
  • lowIntensityColor : default { r: 0, g: 136, b: 255 } - #0088ff
  • highIntensityColor : default { r: 239, g: 68, b: 68 } - #ef4444
  • progressColorLine : default { r: 34, g: 197, b: 94, a:0.9 } - Green
  • progressColorBar : default { r: 255, g: 255, b: 255, a:0.3 } - white faded
  • progressTypeBar : default true
  • progressTypeLine : default true
  • cookieLengthDays : default 7, cookie length in days

The Haptics Settings panel

The settings allow you to change the connection URL and the device maximum intensity. Some find that the 100% setting is too high.

You can embed this on any page using:

<div id="haptic_settings"></div>

CSS

You can overwite the css style of the elements, I have tried to give them unique classnames, just inspect and overwrite. For example:

  • .haptics-settings-form
  • .haptic-label
  • .haptic-label input
  • .haptic-settings-message
  • .haptic-canvas
  • .haptic-canvas-container
  • .haptic-progress
  • .haptic-zoom-canvas

License

haptic-player is BSD 3-Clause licensed.

Copyright (c) 2017-2018, YALL
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this
  list of conditions and the following disclaimer.

* Redistributions in minified form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.

* Neither the name of the project nor the names of its
  contributors may be used to endorse or promote products derived
  from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.