hls.js 播放音视频切片鉴权问题

<template>
  <div>
    <audio ref="audioPlayer" controls />
    <button @click="playAudio">播放音频</button>
  </div>
</template>

<script setup lang="ts">
import Hls from 'hls.js';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const audioPlayer = ref<HTMLAudioElement | null>(null);

const audioUrl = 'https://pep-file.oss-cn-beijing.aliyuncs.com/zjOutResource/xxx/6101/8_b1_16/8_b1_16.m3u8?auth_key=xx';

const playAudio = () => {
  if (audioPlayer.value) {
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(audioUrl);
      hls.attachMedia(audioPlayer.value);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        audioPlayer.value?.play(); 
      });
    } else {
      audioPlayer.value.src = audioUrl; 
      audioPlayer.value.addEventListener('loadedmetadata', () => {
        audioPlayer.value?.play(); 
      });
    }
  }
}

onMounted(() => {
  audioPlayer.value?.load();
})

onBeforeUnmount(() => {
  if (audioPlayer.value) {
    audioPlayer.value.src = ''; 
  }
})
</script>

<style scoped>
</style>

问题：
音频路径audioUrl需要鉴权才能访问，但是m3u8里面的hls.key和.ts文件如何实现自动鉴权

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:8
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-KEY:METHOD=AES-128,URI="hls.key",IV=0x6b75eb391048f9416d3a475499489390
#EXTINF:7.274833,
part_0000.ts
#EXT-X-ENDLIST

本作品采用《CC 协议》，转载必须注明作者和本文链接