bufferAppendError due to unknown issue with audio codec in Chrome browser

[vaniyokk]

What version of Hls.js are you using?

1.1.5

What browser (including version) are you using?

Version 102.0.5005.61 (Official Build) (arm64)

What OS (including version) are you using?

MacOS M1

Test stream

https://hls-js.netlify.app/demo/?src=https%3A%2F%2Flive.hpdev.io%2Fvideos%2F12509_F6w16WnT7bjHeygc%2Fmaster.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==

Configuration

{
  "debug": true,
  "enableWorker": true,
  "lowLatencyMode": true,
  "backBufferLength": 90
}

Additional player setup steps

No response

Checklist

• The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
• The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
• The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
• The stream has correct Access-Control-Allow-Origin headers (CORS)
• There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

1. use src link from example
2. play stream with default HLS.js config in latest Chrome (in Safari works fine)

Expected behaviour

Stream plays gracefully to the end like VLC does.

What actually happened?

Playback hangs and freezes after a while (3-10 seconds, occasionally)

Console output

buffer-controller.ts:407 [error] > [buffer-controller]: Failed 3 times to append segment in sourceBuffer
onError @ buffer-controller.ts:407
executeNext @ buffer-operation-queue.ts:65
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1121
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
main.js:725 Error event: {type: 'mediaError', parent: 'main', details: 'bufferAppendError', err: DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attrib…, fatal: true}
(anonymous) @ main.js:725
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
onError @ buffer-controller.ts:413
executeNext @ buffer-operation-queue.ts:65
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1121
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
main.js:838 Fatal error : bufferAppendError
(anonymous) @ main.js:838
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
onError @ buffer-controller.ts:413
executeNext @ buffer-operation-queue.ts:65
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1121
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
buffer-operation-queue.ts:62 [warn] > [buffer-operation-queue]: Unhandled exception executing the current operation
executeNext @ buffer-operation-queue.ts:62
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1145
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
buffer-controller.ts:384 [error] > [buffer-controller]: Error encountered while trying to append to the audio SourceBuffer DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null.
    at BufferController.appendExecutor (https://hls-js.netlify.app/dist/hls.js:4968:8)
    at Object.execute (https://hls-js.netlify.app/dist/hls.js:4507:16)
    at BufferOperationQueue.executeNext (https://hls-js.netlify.app/dist/hls.js:5113:19)
    at BufferOperationQueue.append (https://hls-js.netlify.app/dist/hls.js:5076:12)
    at BufferController.onBufferAppending (https://hls-js.netlify.app/dist/hls.js:4573:20)
    at EventEmitter.emit (https://hls-js.netlify.app/dist/hls.js:310:33)
    at Hls.emit (https://hls-js.netlify.app/dist/hls.js:17266:26)
    at Hls.trigger (https://hls-js.netlify.app/dist/hls.js:17271:19)
    at StreamController.bufferFragmentData (https://hls-js.netlify.app/dist/hls.js:3554:14)
    at StreamController._handleTransmuxComplete (https://hls-js.netlify.app/dist/hls.js:10360:12)
onError @ buffer-controller.ts:384
executeNext @ buffer-operation-queue.ts:65
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1145
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
buffer-controller.ts:407 [error] > [buffer-controller]: Failed 3 times to append segment in sourceBuffer
onError @ buffer-controller.ts:407
executeNext @ buffer-operation-queue.ts:65
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1145
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
main.js:725 Error event: {type: 'mediaError', parent: 'main', details: 'bufferAppendError', err: DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attrib…, fatal: true}
(anonymous) @ main.js:725
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
onError @ buffer-controller.ts:413
executeNext @ buffer-operation-queue.ts:65
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1145
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
main.js:838 Fatal error : bufferAppendError
(anonymous) @ main.js:838
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
onError @ buffer-controller.ts:413
executeNext @ buffer-operation-queue.ts:65
append @ buffer-operation-queue.ts:25
onBufferAppending @ buffer-controller.ts:416
emit @ index.js:203
emit @ hls.ts:250
trigger @ hls.ts:258
bufferFragmentData @ base-stream-controller.ts:719
_handleTransmuxComplete @ stream-controller.ts:1145
handleTransmuxComplete @ transmuxer-interface.ts:315
onWorkerMessage @ transmuxer-interface.ts:281
base-stream-controller.ts:1381 [log] > [stream-controller]: PARSING->PARSED
base-stream-controller.ts:499 [log] > [stream-controller]: Buffered main sn: 5 of level 4 [2.020,12.000]
base-stream-controller.ts:1381 [log] > [stream-controller]: PARSED->IDLE

Chrome media internals output

No response

[robwalch]

Hi @vaniyokk,

The fix for this issue in #4781 can be verified here https://deploy-preview-4781--hls-js-dev.netlify.app/demo/?src=https%3A%2F%2Flive.hpdev.io%2Fvideos%2F12509_F6w16WnT7bjHeygc%2Fmaster.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==