mediaevents - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

mediaevents.js

@@ -11,12 +11,61 @@ /* mediaEvents
 class mediaEvents {
-  constructor (timings) {
-    if (timings === null) console.error('You need to specify a timings object')
-    this.timings = timings
+  constructor (audioSource, timings) {
+    if (timings === null) console.error('You need to specify a timings object');
+    this.timings = timings;
 
-    this.cache = {
-      timeupdate: null,
-      seeked: null
+    this.audioContext = new AudioContext();
+    this.audioSource = audioSource;
+
+    this.gainNode = this.audioContext.createGain();
+    this.gainNode.connect(this.audioContext.destination);
+
+    this.eventHandler = null;
+
+    this.cache = null;
+  }
+
+  set audioContext (audioContext) {
+    this._audioContext = audioContext;
+  }
+
+  get audioContext () {
+    return this._audioContext;
+  }
+
+  set audioSource (audioSource) {
+    if (typeof audioSource == "string") {
+      this.fetchAudioSource(audioSource);
+    } else if (typeof audioSource == "object" && audioSource.tagName == "AUDIO") {
+      this.fetchAudioSource(audioSource.src);
     }
   }
 
+  get audioSource () {
+    return this._audioSource;
+  }
+
+  set startTime (startTime) {
+    this._startTime = startTime;
+  }
+
+  get startTime () {
+    return this._startTime;
+  }
+
+  set timings (timings) {
+    this._timings = timings;
+  }
+
+  get timings () {
+    return this._timings;
+  }
+
+  set cache (cache) {
+    this._cache = cache;
+  }
+
+  get cache () {
+    return this._cache;
+  }
+
   getActiveTimingKey (currentTime) {
@@ -34,30 +83,55 @@ const timingKeys = Object.keys(this.timings)
 
-  executeEvent (timingKey) {
-    this.timings[timingKey]()
+  set eventHandler (eventHandler) {
+    this._eventHandler = eventHandler; 
   }
 
-  isCache (event, timingKey) {
-    if (this.cache[event] == timingKey) return true
+  get eventHandler () {
+    return this._eventHandler;
+  }
 
-    return false
+  fetchAudioSource (audioSource) {
+    let that = this;
+    let source = this.audioContext.createBufferSource();
+
+    fetch(audioSource).then((response) => {
+      return response.arrayBuffer()
+    }).then((arrayBuffer) => {
+      that.audioContext.decodeAudioData(arrayBuffer)
+        .then((buffer) => {
+          source.buffer = buffer;
+          source.connect(this.gainNode);
+
+          document.dispatchEvent(new Event('mediaEvents.ready'));
+          this._audioSource = source;
+        })
+    })
   }
 
-  setCache (event, timingKey) {
-    this.cache[event] = timingKey
+  start () {
+    this.startTime = this.audioContext.currentTime;
+    this.audioSource.start();
+    this.startEventHandling();
   }
 
-  bind (mediaNode) {
-    let eventListeners = ['timeupdate', 'seeked']
+  startEventHandling () {
+    if (this.eventHandler == null) {
+      this.eventHandler = window.requestAnimationFrame(this.handleEvents.bind(this));
+    }
+  }
 
-    eventListeners.forEach((eventListener) => {
-      mediaNode.addEventListener(eventListener, () => {
-        let timingKey = this.getActiveTimingKey(mediaNode.currentTime)
-  
-        if (timingKey !== null && !this.isCache(eventListener, timingKey)) {
-          this.executeEvent(timingKey)
-          this.setCache(eventListener, timingKey)
-        }
-      })
-    })
+  handleEvents () {
+    let time = this.audioContext.currentTime - this.startTime;
+    let timingKey = this.getActiveTimingKey(time);
+
+    if (timingKey !== null && !(this.cache == timingKey)) {
+      this.executeEvent(timingKey);
+      this.cache = timingKey;
+    }
+
+    this.eventHandler = window.requestAnimationFrame(this.handleEvents.bind(this));
   }
+
+  executeEvent (timingKey) {
+    this.timings[timingKey]();
+  }
 }
@@ -64,0 +138,0 @@

package.json

 {
   "name": "mediaevents",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Fire events for specific timeframes easily",
@@ -5,0 +5,0 @@ "main": "mediaevents.js",

README.md

@@ -15,3 +15,3 @@ # mediaEvents
 ```html
-<script src="https://unpkg.com/mediaevents@1.0.1/mediaevents.js"></script>
+<script src="https://unpkg.com/mediaevents@3.0.0/mediaevents.js"></script>
 ```
@@ -29,2 +29,3 @@
 
+// define timings and their functions
 const timings = {
@@ -40,4 +41,9 @@ "0": function() {
 
-const ev = new mediaEvents(timings)
-ev.bind(media)
+// create mediaEvents instance
+const ev = new mediaEvents(media, timings)
+
+document.addEventListener('mediaEvents.ready', function(event) {
+  // start playback once mediaEvents is ready
+  ev.start()
+})
 ```
@@ -47,18 +53,15 @@
 
-### `new mediaEvents(timings)`
+### `new mediaEvents(audioSource, timings)`
 
+* **`audioSource`:** (required) Link to an audio file or `<audio>`-Tag DOM Element
 * **`timings`:** (required) Object where the keys represent the time and the values are functions or function references
 
-### `mediaEvents.bind(mediaNode)`
+### `mediaEvents.start()`
 
-* **`mediaNode`:** (required) media element (can be `video` or `audio` tag or anything that supplies a `currentTime` parameter) the events should be attached to.
+This will start playback of the specified audio and execute the events at the given time. As the audio buffer is always
+loaded asynchronously you should listen to the `mediaEvents.ready` event on `document` and execute this function once
+the event was emitted.
 
-## Known Issues
-
-The `timeupdate` event that is used by mediaEvents is not updated every millisecond or at a fixed interval, so it's not really accurate.
-
-You can use floats as timing values, but it's not guaranteed it will make it more accurate. Seconds work just fine in all cases.
-
 ## License
 
 mediaEvents is licensed under the MIT license

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6684

increased by37.47%

Lines of code

109

increased by109.62%

Number of lines in readme file

63

increased by5%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes