icecast-metadata-player - npm Package Compare versions

Comparing version 1.17.4 to 1.17.5

package.json

 {
   "name": "icecast-metadata-player",
-  "version": "1.17.4",
+  "version": "1.17.5",
   "description": "Simple to use Javascript class that plays an Icecast stream with real-time metadata updates",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -81,11 +81,11 @@ # Icecast Metadata Player
      | - | - |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.main.min.js" download>`icecast-metadata-player-1.17.4.main.min.js`</a> | Core functionality (playback, metadata) <br> **Use this file in your `<script>` tag** |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.synaudio.min.js" download>`icecast-metadata-player-1.17.4.synaudio.min.js`</a> | Gapless playback support |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.mediasource.min.js" download>`icecast-metadata-player-1.17.4.mediasource.min.js`</a> | Mediasource playback support |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.mpeg.min.js" download>`icecast-metadata-player-1.17.4.mpeg.min.js`</a> | MPEG playback support (webaudio) |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.flac.min.js" download>`icecast-metadata-player-1.17.4.flac.min.js`</a> | FLAC playback support (webaudio) |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.opus.min.js" download>`icecast-metadata-player-1.17.4.opus.min.js`</a> | Opus playback support (webaudio) |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.vorbis.min.js" download>`icecast-metadata-player-1.17.4.vorbis.min.js`</a> | Vorbis playback support (webaudio) |
-     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.4.common.min.js" download>`icecast-metadata-player-1.17.4.common.min.js`</a> | Common functions (webaudio) |
-2. Add a `<script>` tag referencing `icecast-metadata-player-1.17.4.main.min.js` in your html.
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.main.min.js" download>`icecast-metadata-player-1.17.5.main.min.js`</a> | Core functionality (playback, metadata) <br> **Use this file in your `<script>` tag** |
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.synaudio.min.js" download>`icecast-metadata-player-1.17.5.synaudio.min.js`</a> | Gapless playback support |
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.mediasource.min.js" download>`icecast-metadata-player-1.17.5.mediasource.min.js`</a> | Mediasource playback support |
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.mpeg.min.js" download>`icecast-metadata-player-1.17.5.mpeg.min.js`</a> | MPEG playback support (webaudio) |
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.flac.min.js" download>`icecast-metadata-player-1.17.5.flac.min.js`</a> | FLAC playback support (webaudio) |
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.opus.min.js" download>`icecast-metadata-player-1.17.5.opus.min.js`</a> | Opus playback support (webaudio) |
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.vorbis.min.js" download>`icecast-metadata-player-1.17.5.vorbis.min.js`</a> | Vorbis playback support (webaudio) |
+     | <a href="https://raw.githubusercontent.com/eshaz/icecast-metadata-js/master/src/icecast-metadata-player/build/icecast-metadata-player-1.17.5.common.min.js" download>`icecast-metadata-player-1.17.5.common.min.js`</a> | Common functions (webaudio) |
+2. Add a `<script>` tag referencing `icecast-metadata-player-1.17.5.main.min.js` in your html.
 3. `IcecastMetadataPlayer` is made available as a global variable in your webpage to use wherever.
@@ -96,3 +96,3 @@
    ```html
-   <script src="icecast-metadata-player-1.17.4.main.min.js"></script>
+   <script src="icecast-metadata-player-1.17.5.main.min.js"></script>
    <script>
@@ -442,3 +442,3 @@ const onMetadata = (metadata) => {
 IcecastMetadataPlayer builds are supplied with a source map, which allows the minified code to be viewed as fully formatted code in a browser debugger.
-* To enable the source map, simply copy `icecast-metadata-player-1.17.4.min.js.map` located in the build folder of this project to the location along side `icecast-metadata-player-1.17.4.min.js` in your website.
+* To enable the source map, simply copy `icecast-metadata-player-1.17.5.min.js.map` located in the build folder of this project to the location along side `icecast-metadata-player-1.17.5.min.js` in your website.
 * The source map can be used to step through and debug the code as well as see the full variable names and file origin on stack traces if you are facing any issues.
@@ -445,0 +445,0 @@

src/IcecastMetadataPlayer.js

@@ -255,8 +255,23 @@ /**
         const error = e?.target?.error || e;
+        const player = p.get(this)[playerFactory].player;
 
-        this[fireEvent](
-          event.PLAYBACK_ERROR,
-          "The audio element encountered an error." +
-            (errors[error?.code] || ""),
-        );
+        // try to switch containers when decode error is encountered with MediaSource playback
+        if (
+          player?.useNextContainer &&
+          !player?.changingContainer &&
+          error?.code > 2 &&
+          this.state !== state.STOPPING &&
+          this.state !== state.STOPPED
+        ) {
+          player.useNextContainer();
+        }
+
+        if (this.state !== state.STOPPED && !player?.changingContainer) {
+          // iOS Safari throws an error when the MediaStream is reset, but this is fine
+          this[fireEvent](
+            event.PLAYBACK_ERROR,
+            "The audio element encountered an error." +
+              (errors[error?.code] || ""),
+          );
+        }
       },
@@ -278,3 +293,3 @@ [onPlayReady]: () => {
             .catch((e) => {
-              this[fireEvent](event.PLAYBACK_ERROR, e, "Playback failed.");
+              p.get(this)[onAudioError](e);
             });
@@ -281,0 +296,0 @@ }

src/players/MediaSourcePlayer.js

@@ -25,2 +25,3 @@ import {
 
+    this._initSupportedContainers();
     this._init();
@@ -86,2 +87,59 @@ }
 
+  get changingContainer() {
+    return this._changingContainer;
+  }
+
+  useNextContainer() {
+    const nextContainerIndex =
+      this._supportedContainers.indexOf(this._container) + 1;
+    this._container = this._supportedContainers[nextContainerIndex];
+
+    this._changingContainer = true;
+    this.enablePlayButton(["mediasource"]);
+    this._init();
+    this.start().then(() => (this._changingContainer = false));
+  }
+
+  async _initSupportedContainers() {
+    const supportedMimeTypes = new Set();
+    this._supportedContainers = [];
+    this._changingContainer = false;
+
+    let setContainer;
+    this._container = new Promise((resolve) => {
+      setContainer = resolve;
+    });
+
+    const mimeTypes = [
+      [() => this._inputMimeType, "raw"],
+      [
+        async () =>
+          (await this._MSEAudioWrapper).getWrappedMimeType(this._codec, "fmp4"),
+        "fmp4",
+      ],
+      [
+        async () =>
+          (await this._MSEAudioWrapper).getWrappedMimeType(this._codec, "webm"),
+        "webm",
+      ],
+    ];
+
+    for await (const mimeType of mimeTypes) {
+      const mseMimeType = await mimeType[0]();
+      const container = mimeType[1];
+
+      if (
+        MediaSource.isTypeSupported(mseMimeType) &&
+        !supportedMimeTypes.has(mseMimeType)
+      ) {
+        if (setContainer) {
+          setContainer(container);
+          setContainer = null;
+        }
+        supportedMimeTypes.add(mseMimeType);
+        this._supportedContainers.push(container);
+      }
+    }
+  }
+
   async _init() {
@@ -102,3 +160,6 @@ super._init();
 
-    this._addFrames = await this._prepareMediaSource(
+    const container = await this._container;
+    this._container = container;
+
+    this._addFrames = this._prepareMediaSource(
       this._inputMimeType,
@@ -159,15 +220,19 @@ this._codec,
 
-  async _prepareMediaSource(inputMimeType, codec) {
-    const wrappedMineType = (await this._MSEAudioWrapper).getWrappedMimeType(
-      codec,
-    );
+  _prepareMediaSource(inputMimeType, codec) {
+    if (!this._container) {
+      this._icecast[fireEvent](
+        event.PLAYBACK_ERROR,
+        `Media Source Extensions API in your browser does not support ${inputMimeType} or ${this._wrapper.mimeType}.` +
+          "See: https://caniuse.com/mediasource and https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API",
+      );
+    } else if (this._container === "raw") {
+      // pass the audio directly to MSE
+      this._createMediaSource(inputMimeType);
 
-    if (MediaSource.isTypeSupported(wrappedMineType)) {
-      this._codecHeader
-        .then((codecHeader) =>
-          this._createMSEWrapper(inputMimeType, codec, codecHeader.channels),
-        )
-        .then(() => {
-          this._createMediaSource(this._wrapper.mimeType);
-        });
+      return async (frames) =>
+        this._appendSourceBuffer(concatBuffers(frames.map((f) => f.data)));
+    } else {
+      this._createMSEWrapper(inputMimeType, codec, this._container).then(() =>
+        this._createMediaSource(this._wrapper.mimeType),
+      );
 
@@ -191,3 +256,3 @@ return inputMimeType.match(/ogg/)
                     codec,
-                    codecHeader.channels,
+                    this._container,
                   );
@@ -208,22 +273,10 @@
             );
-    } else if (MediaSource.isTypeSupported(inputMimeType)) {
-      // pass the audio directly to MSE
-      this._createMediaSource(inputMimeType);
-
-      return async (frames) =>
-        this._appendSourceBuffer(concatBuffers(frames.map((f) => f.data)));
-    } else {
-      this._icecast[fireEvent](
-        event.PLAYBACK_ERROR,
-        `Media Source Extensions API in your browser does not support ${inputMimeType} or ${this._wrapper.mimeType}.` +
-          "See: https://caniuse.com/mediasource and https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API",
-      );
     }
   }
 
-  async _createMSEWrapper(inputMimeType, codec, channels) {
+  async _createMSEWrapper(inputMimeType, codec, preferredContainer) {
     // wrap the audio into fragments before passing to MSE
     this._wrapper = new (await this._MSEAudioWrapper).default(inputMimeType, {
       codec,
-      preferredContainer: channels > 2 ? "webm" : "fmp4",
+      preferredContainer,
     });
@@ -230,0 +283,0 @@ }

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1469226

increased by0.39%

Lines of code

4575

increased by1.37%

No dependency changes