NativeWebKit.js

Javascript Library that interfaces with the NativeWebKit App and Safari Web Extension

📚 Table of Contents

📦 Setup
🎧 HeadphoneMotionManager

📦 Setup

Using any of the build files in the /build directory, you can either add it to your webpage:

<scriptsrc="nativewebkit.js"></script><!-- or minified --><scriptsrc="nativewebkit.min.js"></script>

which adds a NativeWebKit object into the global scope:

console.log("NativeWebKit is now available",NativeWebKit);NativeWebKit.HeadphoneMotionManager.addEventListener("motionData",(event)=>{constmotionData=event.message.motionData;console.log("received headphone motionData",motionData);});

or you can import it as a module into your javascript files:

import{HeadphoneMotionManager}from"nativewebkit.module.js";// or "nativewebkit.module.min.js"HeadphoneMotionManager.addEventListener("motionData",(event)=>{constmotionData=event.message.motionData;console.log("received headphone motionData",motionData);});

🎧 HeadphoneMotionManager

HeadphoneMotionManager manages motion data from AirPods Pro, AirPods (3rd gen), AirPods Max, and Beats Fit Pro.

import{HeadphoneMotionManager}from"nativewebkit.module.js";// set to true to check if your device supports headphone motion data on webpage loadHeadphoneMotionManager.checkAvailabilityOnLoad=true;// set to true to turn off headphone motion updates when the page closes/reloads/redirectsHeadphoneMotionManager.stopUpdatesOnUnload=true;// listen to "isAvailable" event so you can know if your device supports headphone motion dataHeadphoneMotionManager.addEventListener("isAvailable",(event)=>{console.log("isAvailable",event.message.isAvailable);});// start receiving updates - can trigger in response to a user event, or automatically in the "isAvailable" event// HeadphoneMotionManager.startUpdates();// stop receiving updates - can trigger in response to a user event, or you can set HeadphoneMotionManager.stopUpdatesOnUnload to false to stop automatically when refreshing/closing/leaving the webpage// HeadphoneMotionManager.stopUpdates();// listen to "isActive" event so you can know when your device has started/stopped receiving headphone motion data// this will trigger after you call HeadphoneMotionManager.startUpdates or HeadphoneMotionManager.stopUpdates, assuming "isActive" changes stateHeadphoneMotionManager.addEventListener("isActive",(event)=>{console.log("isActive",event.message.isActive);});// the part you care about - triggers when new headphone motion data is availableHeadphoneMotionManager.addEventListener("motionData",(event)=>{constmotionData=event.message.motionData;console.log("received headphone motionData",motionData);const{timestamp, sensorLocation, quaternion, euler, userAcceleration, gravity, rotationRate}=motionData;console.log("timestamp",timestamp);// a number (milliseconds)console.log("sensorLocation",sensorLocation);// "left headphone", "right headphone", "default", or "unknown"console.log("quaternion",quaternion);// an array of 4 numbers - compatible with three.js Quaternionconsole.log("euler",euler);// an array of 3 numbers - compatible with three.js Eulerconsole.log("userAcceleration",userAcceleration);// an array of 3 numbers - compatible with three.js Vector3console.log("gravity",gravity);// an array of 3 numbers - compatible with three.js Vector3console.log("rotationRate",rotationRate);// an array of 3 numbers - compatible with three.js Euler});