apm-react-audio-player 1.1.3 → 2.0.0

package/dist/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var Hls = require('hls.js');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -10,6 +11,14 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -49,9 +58,44 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -60,8 +104,11 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtrl) {
-  var initialDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    volumeCtrl = _ref.volumeCtrl,
+    initialDuration = _ref.initialDuration,
+    hlsRef = _ref.hlsRef;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPlaying = _useState2[0],
@@ -78,11 +125,12 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     _useState8 = _slicedToArray(_useState7, 2),
     isFinishedPlaying = _useState8[0],
     setIsFinishedPlaying = _useState8[1];
-  var animationRef = React.useRef(); // reference the animation
+  var animationRef = React.useRef();
+  var pendingPlayAbortRef = React.useRef(null);
   var _useState9 = React.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isMuted = _useState10[0],
-    setIsMuted = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    isMuted = _useState0[0],
+    setIsMuted = _useState0[1];
   var isStream = audioRef.current && audioRef.current.duration === Infinity;
   React.useEffect(function () {
     if (currentTime === Number(duration)) {
@@ -141,6 +189,10 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     animationRef.current = window.requestAnimationFrame(_whilePlaying);
   };
   var pause = function pause() {
+    if (pendingPlayAbortRef.current) {
+      pendingPlayAbortRef.current();
+      pendingPlayAbortRef.current = null;
+    }
     setIsPlaying(false);
     audioRef.current.pause();
     window.cancelAnimationFrame(animationRef.current);
@@ -152,26 +204,80 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
   //   pause()
   // }
 
+  var _safePlay = function safePlay(audio) {
+    var promise = audio.play();
+    if (promise !== undefined) {
+      promise["catch"](function (err) {
+        if (err.name === 'NotAllowedError') {
+          setIsPlaying(false);
+        } else if (err.name === 'AbortError') {
+          // play() was interrupted by a concurrent load() (e.g. ReactAudioPlayerInner
+          // calling load() after a source change) — retry once canplay fires.
+          // If the audio element was already unlocked by a prior play() call within
+          // a user gesture (e.g. the Safari fix in AudioContext), this retry succeeds.
+          audio.addEventListener('canplay', function () {
+            return _safePlay(audio);
+          }, {
+            once: true
+          });
+        }
+      });
+    }
+  };
   var play = function play() {
     setIsPlaying(true);
     setIsFinishedPlaying(false);
+    var elDuration = audioRef.current.duration;
+    var isLiveOrUnloaded = elDuration === Infinity || isNaN(elDuration);
+    if (isLiveOrUnloaded) {
+      var _audioRef$current$cur;
+      if (hlsRef !== null && hlsRef !== void 0 && hlsRef.current) {
+        var audio = audioRef.current;
+        var hls = hlsRef.current;
+        // If data is already buffered (e.g. resuming after pause), play immediately.
+        // Otherwise wait for the first fragment so Safari's audio decoder is warm
+        // before output starts, preventing the first syllable from being cut.
+        if (audio.buffered.length > 0) {
+          _safePlay(audio);
+        } else {
+          var _onFragBuffered = function onFragBuffered() {
+            pendingPlayAbortRef.current = null;
+            hls.off('hlsFragBuffered', _onFragBuffered);
+            _safePlay(audio);
+          };
+          pendingPlayAbortRef.current = function () {
+            return hls.off('hlsFragBuffered', _onFragBuffered);
+          };
+          hls.on('hlsFragBuffered', _onFragBuffered);
+        }
+      } else if (elDuration === Infinity && (_audioRef$current$cur = audioRef.current.currentSrc) !== null && _audioRef$current$cur !== void 0 && _audioRef$current$cur.split('?')[0].endsWith('.m3u8')) {
+        // Native live stream (no hls.js, e.g. iOS Safari): force a fresh manifest
+        // fetch so we don't play from a stale buffer position across a discontinuity.
+        var onCanPlay = function onCanPlay() {
+          pendingPlayAbortRef.current = null;
+          if (audioRef.current) _safePlay(audioRef.current);
+        };
+        pendingPlayAbortRef.current = function () {
+          var _audioRef$current;
+          return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.removeEventListener('canplay', onCanPlay);
+        };
+        audioRef.current.addEventListener('canplay', onCanPlay, {
+          once: true
+        });
+        audioRef.current.load();
+      } else {
+        // Finite audio not yet loaded (duration is NaN): call play() directly so
+        // Safari's user-gesture scope isn't lost waiting for an async canplay event.
+        _safePlay(audioRef.current);
+      }
+    } else {
+      _safePlay(audioRef.current);
 
-    // For live streams (duration === Infinity), reset the audio element before
-    // playing. The audioSrc useEffect in ReactAudioPlayerInner calls load() on
-    // mount, which causes the browser to pre-buffer the HLS stream. By the time
-    // the user clicks play the manifest's seekable window has moved forward and
-    // old segments are gone, so the browser auto-seeks to the earliest available
-    // position (e.g. 20s in), causing ads to start mid-stream. Calling load()
-    // here reconnects to the current live edge and gets a fresh manifest.
-    if (duration === Infinity) {
-      audioRef.current.load();
-    }
-    audioRef.current.play();
-
-    // Only start RAF loop for non-live streams with valid duration
-    var dur = audioRef.current.duration;
-    if (dur !== Infinity && !isNaN(dur) && isFinite(dur)) {
-      animationRef.current = window.requestAnimationFrame(_whilePlaying);
+      // Only start RAF loop for non-live streams with valid duration
+      var dur = audioRef.current.duration;
+      if (dur !== Infinity && !isNaN(dur) && isFinite(dur)) {
+        animationRef.current = window.requestAnimationFrame(_whilePlaying);
+      }
     }
   };
   var toggleMute = function toggleMute() {
@@ -300,6 +406,13 @@ var Pause = function Pause() {
   }));
 };
 
+var getHlsSrc = function getHlsSrc(audioSrc) {
+  var _urls$find;
+  var urls = Array.isArray(audioSrc) ? audioSrc : [audioSrc];
+  return (_urls$find = urls.find(function (url) {
+    return url && url.split('?')[0].endsWith('.m3u8');
+  })) !== null && _urls$find !== void 0 ? _urls$find : null;
+};
 var getTypeFromExtension = function getTypeFromExtension(url) {
   var extension = url.split('.').pop().split('?')[0];
   switch (extension) {
@@ -319,11 +432,15 @@ var getTypeFromExtension = function getTypeFromExtension(url) {
   }
 };
 var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
-  var _props$audioPlayerRef, _props$progressBarRef;
-  // references
-  var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : React.useRef(); // reference our audio component
-  var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : React.useRef(); // reference our progress bar
-
+  var _props$audioPlayerRef, _props$progressBarRef, _props$hlsRef;
+  // Always call hooks unconditionally — use internal refs when props don't provide them
+  var internalAudioRef = React.useRef();
+  var internalProgressBarRef = React.useRef();
+  var internalHlsRef = React.useRef(null);
+  var hasInitializedRef = React.useRef(false);
+  // Track isPlaying via a ref so the source-change useEffect can read the
+  // current value without adding isPlaying to its dependency array.
+  var isPlayingRef = React.useRef(false);
   var customStyles = props ? props.style : '';
   var title = props.title,
     audioSrc = props.audioSrc,
@@ -346,20 +463,66 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     forwardControl = props.forwardControl,
     subtitle = props.subtitle,
     prefix = props.prefix;
+  var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : internalAudioRef;
+  var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : internalProgressBarRef;
+  var hlsRef = (_props$hlsRef = props.hlsRef) !== null && _props$hlsRef !== void 0 ? _props$hlsRef : internalHlsRef;
+  var hlsSrcForRender = getHlsSrc(audioSrc);
+  var isHlsManaged = !!(hlsSrcForRender && Hls.isSupported());
+
+  // Keep isPlayingRef in sync on every render (runs before effects).
+  isPlayingRef.current = isPlaying;
   var audioDuration = duration && !isNaN(duration) && calculateTime(duration);
   var formatDuration = duration && !isNaN(duration) && audioDuration && formatCalculateTime(audioDuration);
 
-  // Reload audio when audioSrc changes
-  // Use JSON.stringify to handle array comparisons by value instead of reference
+  // Manage audio source changes. For HLS sources hls.js owns the loading cycle;
+  // for everything else we fall back to the native load() path.
+  // JSON.stringify handles array-valued audioSrc comparisons by value.
   React.useEffect(function () {
-    if (audioPlayerRef.current && audioSrc) {
+    if (!audioPlayerRef.current || !audioSrc) return;
+    if (hasInitializedRef.current) {
       resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
-      try {
-        audioPlayerRef.current.load();
-      } catch (err) {
-        console.warn('Failed to reload audio source:', err);
+    }
+
+    // Tear down any existing hls.js instance before re-evaluating the source.
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    var hlsSrc = getHlsSrc(audioSrc);
+    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (hlsSrc && Hls.isSupported()) {
+      var hls = new Hls(_objectSpread2({
+        liveSyncDurationCount: 3,
+        liveMaxLatencyDurationCount: 5,
+        enableWorker: !isSafari
+      }, isSafari && {
+        maxBufferHole: 2,
+        maxSeekHole: 2
+      }));
+      hls.loadSource(hlsSrc);
+      hls.attachMedia(audioPlayerRef.current);
+      hlsRef.current = hls;
+    } else {
+      // Non-HLS: call load() to prime the new source.
+      // Safari: skip load() when playing — the synchronous play() called in the
+      //   gesture handler would be aborted (AbortError), losing the user activation token.
+      // Chrome/Firefox: always call load(); AudioContext defers play() via pendingPlayRef
+      //   until after this effect, so load() and play() are sequenced with no concurrent abort.
+      if (hasInitializedRef.current && (!isSafari || !isPlayingRef.current)) {
+        try {
+          audioPlayerRef.current.load();
+        } catch (err) {
+          console.warn('Failed to reload audio source:', err);
+        }
       }
     }
+    hasInitializedRef.current = true;
+    return function () {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
   }, [JSON.stringify(audioSrc)]);
 
   // Set initial volume to 100%
@@ -379,16 +542,13 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     preload: "none",
     onLoadedMetadata: onLoadedMetadata,
     muted: isMuted
-  }, Array.isArray(audioSrc) ? audioSrc.map(function (src, index) {
+  }, !isHlsManaged && (Array.isArray(audioSrc) ? audioSrc : [audioSrc]).map(function (url, i) {
     return /*#__PURE__*/React.createElement("source", {
-      key: index,
-      src: src,
-      type: getTypeFromExtension(src)
+      key: i,
+      src: url,
+      type: getTypeFromExtension(url)
     });
-  }) : audioSrc ? /*#__PURE__*/React.createElement("source", {
-    src: audioSrc,
-    type: getTypeFromExtension(audioSrc)
-  }) : null, "Your browser does not support the audio element."), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "player-layout"
   }, volumeCtrl && /*#__PURE__*/React.createElement("div", {
     className: "player-controls-secondary-outer"
@@ -485,11 +645,13 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
   // references
   var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : React.useRef(); // reference our audio component
   var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : React.useRef(); // reference our progress bar
-
+  var hlsRef = React.useRef(null);
   var customStyles = props ? props.style : '';
 
   // hooks
-  var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef),
+  var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef, {
+      hlsRef: hlsRef
+    }),
     isPlaying = _useAudioPlayer.isPlaying,
     currentTime = _useAudioPlayer.currentTime,
     duration = _useAudioPlayer.duration,
@@ -506,6 +668,7 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
   return /*#__PURE__*/React.createElement(ReactAudioPlayerInner, _extends({}, props, {
     audioPlayerRef: audioPlayerRef,
     progressBarRef: progressBarRef,
+    hlsRef: hlsRef,
     isPlaying: isPlaying,
     isMuted: isMuted,
     currentTime: currentTime,

package/dist/index.modern.js

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import Hls from 'hls.js';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -8,6 +9,14 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -47,9 +56,44 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -58,8 +102,11 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtrl) {
-  var initialDuration = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    volumeCtrl = _ref.volumeCtrl,
+    initialDuration = _ref.initialDuration,
+    hlsRef = _ref.hlsRef;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPlaying = _useState2[0],
@@ -76,11 +123,12 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     _useState8 = _slicedToArray(_useState7, 2),
     isFinishedPlaying = _useState8[0],
     setIsFinishedPlaying = _useState8[1];
-  var animationRef = useRef(); // reference the animation
+  var animationRef = useRef();
+  var pendingPlayAbortRef = useRef(null);
   var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isMuted = _useState10[0],
-    setIsMuted = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    isMuted = _useState0[0],
+    setIsMuted = _useState0[1];
   var isStream = audioRef.current && audioRef.current.duration === Infinity;
   useEffect(function () {
     if (currentTime === Number(duration)) {
@@ -139,6 +187,10 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     animationRef.current = window.requestAnimationFrame(_whilePlaying);
   };
   var pause = function pause() {
+    if (pendingPlayAbortRef.current) {
+      pendingPlayAbortRef.current();
+      pendingPlayAbortRef.current = null;
+    }
     setIsPlaying(false);
     audioRef.current.pause();
     window.cancelAnimationFrame(animationRef.current);
@@ -150,26 +202,80 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
   //   pause()
   // }
 
+  var _safePlay = function safePlay(audio) {
+    var promise = audio.play();
+    if (promise !== undefined) {
+      promise["catch"](function (err) {
+        if (err.name === 'NotAllowedError') {
+          setIsPlaying(false);
+        } else if (err.name === 'AbortError') {
+          // play() was interrupted by a concurrent load() (e.g. ReactAudioPlayerInner
+          // calling load() after a source change) — retry once canplay fires.
+          // If the audio element was already unlocked by a prior play() call within
+          // a user gesture (e.g. the Safari fix in AudioContext), this retry succeeds.
+          audio.addEventListener('canplay', function () {
+            return _safePlay(audio);
+          }, {
+            once: true
+          });
+        }
+      });
+    }
+  };
   var play = function play() {
     setIsPlaying(true);
     setIsFinishedPlaying(false);
+    var elDuration = audioRef.current.duration;
+    var isLiveOrUnloaded = elDuration === Infinity || isNaN(elDuration);
+    if (isLiveOrUnloaded) {
+      var _audioRef$current$cur;
+      if (hlsRef !== null && hlsRef !== void 0 && hlsRef.current) {
+        var audio = audioRef.current;
+        var hls = hlsRef.current;
+        // If data is already buffered (e.g. resuming after pause), play immediately.
+        // Otherwise wait for the first fragment so Safari's audio decoder is warm
+        // before output starts, preventing the first syllable from being cut.
+        if (audio.buffered.length > 0) {
+          _safePlay(audio);
+        } else {
+          var _onFragBuffered = function onFragBuffered() {
+            pendingPlayAbortRef.current = null;
+            hls.off('hlsFragBuffered', _onFragBuffered);
+            _safePlay(audio);
+          };
+          pendingPlayAbortRef.current = function () {
+            return hls.off('hlsFragBuffered', _onFragBuffered);
+          };
+          hls.on('hlsFragBuffered', _onFragBuffered);
+        }
+      } else if (elDuration === Infinity && (_audioRef$current$cur = audioRef.current.currentSrc) !== null && _audioRef$current$cur !== void 0 && _audioRef$current$cur.split('?')[0].endsWith('.m3u8')) {
+        // Native live stream (no hls.js, e.g. iOS Safari): force a fresh manifest
+        // fetch so we don't play from a stale buffer position across a discontinuity.
+        var onCanPlay = function onCanPlay() {
+          pendingPlayAbortRef.current = null;
+          if (audioRef.current) _safePlay(audioRef.current);
+        };
+        pendingPlayAbortRef.current = function () {
+          var _audioRef$current;
+          return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.removeEventListener('canplay', onCanPlay);
+        };
+        audioRef.current.addEventListener('canplay', onCanPlay, {
+          once: true
+        });
+        audioRef.current.load();
+      } else {
+        // Finite audio not yet loaded (duration is NaN): call play() directly so
+        // Safari's user-gesture scope isn't lost waiting for an async canplay event.
+        _safePlay(audioRef.current);
+      }
+    } else {
+      _safePlay(audioRef.current);
 
-    // For live streams (duration === Infinity), reset the audio element before
-    // playing. The audioSrc useEffect in ReactAudioPlayerInner calls load() on
-    // mount, which causes the browser to pre-buffer the HLS stream. By the time
-    // the user clicks play the manifest's seekable window has moved forward and
-    // old segments are gone, so the browser auto-seeks to the earliest available
-    // position (e.g. 20s in), causing ads to start mid-stream. Calling load()
-    // here reconnects to the current live edge and gets a fresh manifest.
-    if (duration === Infinity) {
-      audioRef.current.load();
-    }
-    audioRef.current.play();
-
-    // Only start RAF loop for non-live streams with valid duration
-    var dur = audioRef.current.duration;
-    if (dur !== Infinity && !isNaN(dur) && isFinite(dur)) {
-      animationRef.current = window.requestAnimationFrame(_whilePlaying);
+      // Only start RAF loop for non-live streams with valid duration
+      var dur = audioRef.current.duration;
+      if (dur !== Infinity && !isNaN(dur) && isFinite(dur)) {
+        animationRef.current = window.requestAnimationFrame(_whilePlaying);
+      }
     }
   };
   var toggleMute = function toggleMute() {
@@ -298,6 +404,13 @@ var Pause = function Pause() {
   }));
 };
 
+var getHlsSrc = function getHlsSrc(audioSrc) {
+  var _urls$find;
+  var urls = Array.isArray(audioSrc) ? audioSrc : [audioSrc];
+  return (_urls$find = urls.find(function (url) {
+    return url && url.split('?')[0].endsWith('.m3u8');
+  })) !== null && _urls$find !== void 0 ? _urls$find : null;
+};
 var getTypeFromExtension = function getTypeFromExtension(url) {
   var extension = url.split('.').pop().split('?')[0];
   switch (extension) {
@@ -317,11 +430,15 @@ var getTypeFromExtension = function getTypeFromExtension(url) {
   }
 };
 var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
-  var _props$audioPlayerRef, _props$progressBarRef;
-  // references
-  var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : useRef(); // reference our audio component
-  var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : useRef(); // reference our progress bar
-
+  var _props$audioPlayerRef, _props$progressBarRef, _props$hlsRef;
+  // Always call hooks unconditionally — use internal refs when props don't provide them
+  var internalAudioRef = useRef();
+  var internalProgressBarRef = useRef();
+  var internalHlsRef = useRef(null);
+  var hasInitializedRef = useRef(false);
+  // Track isPlaying via a ref so the source-change useEffect can read the
+  // current value without adding isPlaying to its dependency array.
+  var isPlayingRef = useRef(false);
   var customStyles = props ? props.style : '';
   var title = props.title,
     audioSrc = props.audioSrc,
@@ -344,20 +461,66 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     forwardControl = props.forwardControl,
     subtitle = props.subtitle,
     prefix = props.prefix;
+  var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : internalAudioRef;
+  var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : internalProgressBarRef;
+  var hlsRef = (_props$hlsRef = props.hlsRef) !== null && _props$hlsRef !== void 0 ? _props$hlsRef : internalHlsRef;
+  var hlsSrcForRender = getHlsSrc(audioSrc);
+  var isHlsManaged = !!(hlsSrcForRender && Hls.isSupported());
+
+  // Keep isPlayingRef in sync on every render (runs before effects).
+  isPlayingRef.current = isPlaying;
   var audioDuration = duration && !isNaN(duration) && calculateTime(duration);
   var formatDuration = duration && !isNaN(duration) && audioDuration && formatCalculateTime(audioDuration);
 
-  // Reload audio when audioSrc changes
-  // Use JSON.stringify to handle array comparisons by value instead of reference
+  // Manage audio source changes. For HLS sources hls.js owns the loading cycle;
+  // for everything else we fall back to the native load() path.
+  // JSON.stringify handles array-valued audioSrc comparisons by value.
   useEffect(function () {
-    if (audioPlayerRef.current && audioSrc) {
+    if (!audioPlayerRef.current || !audioSrc) return;
+    if (hasInitializedRef.current) {
       resetDuration === null || resetDuration === void 0 ? void 0 : resetDuration();
-      try {
-        audioPlayerRef.current.load();
-      } catch (err) {
-        console.warn('Failed to reload audio source:', err);
+    }
+
+    // Tear down any existing hls.js instance before re-evaluating the source.
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    var hlsSrc = getHlsSrc(audioSrc);
+    var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    if (hlsSrc && Hls.isSupported()) {
+      var hls = new Hls(_objectSpread2({
+        liveSyncDurationCount: 3,
+        liveMaxLatencyDurationCount: 5,
+        enableWorker: !isSafari
+      }, isSafari && {
+        maxBufferHole: 2,
+        maxSeekHole: 2
+      }));
+      hls.loadSource(hlsSrc);
+      hls.attachMedia(audioPlayerRef.current);
+      hlsRef.current = hls;
+    } else {
+      // Non-HLS: call load() to prime the new source.
+      // Safari: skip load() when playing — the synchronous play() called in the
+      //   gesture handler would be aborted (AbortError), losing the user activation token.
+      // Chrome/Firefox: always call load(); AudioContext defers play() via pendingPlayRef
+      //   until after this effect, so load() and play() are sequenced with no concurrent abort.
+      if (hasInitializedRef.current && (!isSafari || !isPlayingRef.current)) {
+        try {
+          audioPlayerRef.current.load();
+        } catch (err) {
+          console.warn('Failed to reload audio source:', err);
+        }
       }
     }
+    hasInitializedRef.current = true;
+    return function () {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
   }, [JSON.stringify(audioSrc)]);
 
   // Set initial volume to 100%
@@ -377,16 +540,13 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     preload: "none",
     onLoadedMetadata: onLoadedMetadata,
     muted: isMuted
-  }, Array.isArray(audioSrc) ? audioSrc.map(function (src, index) {
+  }, !isHlsManaged && (Array.isArray(audioSrc) ? audioSrc : [audioSrc]).map(function (url, i) {
     return /*#__PURE__*/React.createElement("source", {
-      key: index,
-      src: src,
-      type: getTypeFromExtension(src)
+      key: i,
+      src: url,
+      type: getTypeFromExtension(url)
     });
-  }) : audioSrc ? /*#__PURE__*/React.createElement("source", {
-    src: audioSrc,
-    type: getTypeFromExtension(audioSrc)
-  }) : null, "Your browser does not support the audio element."), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "player-layout"
   }, volumeCtrl && /*#__PURE__*/React.createElement("div", {
     className: "player-controls-secondary-outer"
@@ -483,11 +643,13 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
   // references
   var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : useRef(); // reference our audio component
   var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : useRef(); // reference our progress bar
-
+  var hlsRef = useRef(null);
   var customStyles = props ? props.style : '';
 
   // hooks
-  var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef),
+  var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef, {
+      hlsRef: hlsRef
+    }),
     isPlaying = _useAudioPlayer.isPlaying,
     currentTime = _useAudioPlayer.currentTime,
     duration = _useAudioPlayer.duration,
@@ -504,6 +666,7 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
   return /*#__PURE__*/React.createElement(ReactAudioPlayerInner, _extends({}, props, {
     audioPlayerRef: audioPlayerRef,
     progressBarRef: progressBarRef,
+    hlsRef: hlsRef,
     isPlaying: isPlaying,
     isMuted: isMuted,
     currentTime: currentTime,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apm-react-audio-player",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "author": "Jason Phan <jphan@mpr.org>",
   "license": "MIT",
   "private": false,
@@ -31,6 +31,7 @@
     "react": "^16.0.0"
   },
   "dependencies": {
+    "hls.js": "^1.6.16",
     "rollup": "^4.59.0",
     "rollup-plugin-babel": "^4.3.3"
   },
@@ -69,12 +70,15 @@
     "tough-cookie": ">=4.1.3",
     "ajv": ">=6.14.0",
     "qs": ">=6.14.1",
-    "lodash": ">=4.17.21",
+    "lodash": ">=4.18.0",
     "js-yaml": ">=4.1.0",
-    "@babel/helpers": ">=7.26.0",
-    "@babel/runtime": ">=7.26.0",
-    "flatted": ">=3.3.3",
-    "brace-expansion": ">=2.0.1",
+    "@babel/helpers": ">=7.26.10",
+    "@babel/runtime": ">=7.26.10",
+    "@babel/plugin-transform-modules-systemjs": ">=7.29.0",
+    "flatted": ">=3.4.2",
+    "brace-expansion": ">=5.0.5",
+    "fast-uri": ">=3.1.2",
+    "picomatch": ">=2.3.2",
     "tmp": ">=0.2.3"
   },
   "files": [