Vue.js：MP3文件数组已生成但音频无法播放问题求助

我正在开发服务叫号通知功能，目标是播放音频告知等待用户轮到其办理业务。开发中通过搜索资料调整示例代码解决了部分问题，但仍有部分逻辑未完全理解。目前filenames.value已存储MP3文件路径数组，但音频无法播放；还触发过如下错误：

onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

最初的代码 #

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const collection1Data = ref([]);
const collection2Data = ref([]);
const finalData = ref([]);
const latestfinalData = ref([]);

const fetchData = async () => {
  const [collection1Response, collection2Response] = await Promise.all([
    axios.get('https://koh-abx.com:50100/onboardshows'),
    axios.get('https://koh-abx.com:50100/onboardlands'),
  ]);
  collection1Data.value = collection1Response.data;
  collection2Data.value = collection2Response.data;
};

onMounted(async () => {
  await fetchData();
  setInterval(async () => {
    await fetchData();
    finalData.value = [];

    collection1Data.value.forEach(doc1 => {
      const matchingDoc = collection2Data.value.find(doc2 => doc1.idshow === doc2.idshow);
      if (matchingDoc) {
        finalData.value.push({
          idshow: doc1.idshow,
          numbershow: doc1.updatedAt > matchingDoc.updatedAt ? doc1.numbershow : matchingDoc.numbershow,
          ab: doc1.updatedAt > matchingDoc.updatedAt ? doc1.ab : matchingDoc.ab,
          updatedAt: doc1.updatedAt > matchingDoc.updatedAt ? doc1.updatedAt : matchingDoc.updatedAt
        });
      } else {
        finalData.value.push({
          idshow: doc1.idshow,
          numbershow: doc1.numbershow,
          ab: doc1.ab,
          updatedAt: doc1.updatedAt
        });
      }
    });

    collection2Data.value.forEach(doc2 => {
      if (!finalData.value.find(doc => doc.idshow === doc2.idshow)) {
        finalData.value.push({
          idshow: doc2.idshow,
          numbershow: doc2.numbershow,
          ab: doc2.ab,
          updatedAt: doc2.updatedAt
        });
      }
    });

    console.log(finalData.value);

    latestfinalData.value = finalData.value.filter(doc => (Date.now() - new Date(doc.updatedAt).getTime()) < 15000);
    console.log(latestfinalData.value);

    const filenames = computed(() => {
  return latestfinalData.value.map(item => {
    const digits = item.numbershow.toString().split('');
    return digits.map(digit => `https://koh-samui.com/sound/${digit}.mp3`);
  });
});

console.log(filenames.value);

const audioRef = ref(null);
const isPlaying = ref(false);

onMounted(() => {
  const sounds = filenames.value;

  let currentSound = 0;
  audioRef.value = new Audio(sounds[currentSound]);
  audioRef.value.addEventListener("ended", () => {
    isPlaying.value = false;
    currentSound++;
    if (currentSound < sounds.length) {
      audioRef.value.src = sounds[currentSound];
      audioRef.value.play();
    }
  });

  if (!isPlaying.value) {
    isPlaying.value = true;
    audioRef.value.play();
  }
});
    
}, 2000);
});

</script>

调整后的代码（仍无声音） #

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const collection1Data = ref([]);
const collection2Data = ref([]);
const finalData = ref([]);
const latestfinalData = ref([]);
const sounds = ref([]);
const audioRef = ref(null)
const isPlaying = ref(false)

const fetchData = async () => {
  const [collection1Response, collection2Response] = await Promise.all([
    axios.get('https://koh-abx.com:50100/onboardshows'),
    axios.get('https://koh-abx.com:50100/onboardlands'),
  ]);
  collection1Data.value = collection1Response.data;
  collection2Data.value = collection2Response.data;
};

onMounted(async () => {
  await fetchData();
  setInterval(() => {
    fetchData().then(() => {
      finalData.value = [];

      collection1Data.value.forEach(doc1 => {
        const matchingDoc = collection2Data.value.find(doc2 => doc1.idshow === doc2.idshow);
        if (matchingDoc) {
          finalData.value.push({
            idshow: doc1.idshow,
            numbershow: doc1.updatedAt > matchingDoc.updatedAt ? doc1.numbershow : matchingDoc.numbershow,
            ab: doc1.updatedAt > matchingDoc.updatedAt ? doc1.ab : matchingDoc.ab,
            updatedAt: doc1.updatedAt > matchingDoc.updatedAt ? doc1.updatedAt : matchingDoc.updatedAt
          });
        } else {
          finalData.value.push({
            idshow: doc1.idshow,
            numbershow: doc1.numbershow,
            ab: doc1.ab,
            updatedAt: doc1.updatedAt
          });
        }
      });
  
      collection2Data.value.forEach(doc2 => {
        if (!finalData.value.find(doc => doc.idshow === doc2.idshow)) {
          finalData.value.push({
            idshow: doc2.idshow,
            numbershow: doc2.numbershow,
            ab: doc2.ab,
            updatedAt: doc2.updatedAt
          });
        }
      });

      console.log(finalData.value);



  latestfinalData.value = finalData.value.filter(doc => (Date.now() - new Date(doc.updatedAt).getTime()) < 15000);
   console.log(latestfinalData.value);
   });

   const filenames = computed(() => {
      return latestfinalData.value.map(item => {
        const digits = item.numbershow.toString().split('');
        return digits.map(digit => `https://koh-abx.com/sound/${digit}.mp3`);
      });
    });

    console.log(filenames.value);
    sounds.value = filenames.value ;
    playSound();

  }, 5000);

});


const playSound = () => {
  let currentSound = 0;
  audioRef.value = new Audio(sounds.value[currentSound]);

  audioRef.value.addEventListener("ended", () => {
    isPlaying.value = false;
    currentSound++;
    if (currentSound < sounds.value.length) {
      audioRef.value.src = sounds.value[currentSound];
      audioRef.value.play();
    }
  });

  if (!isPlaying.value) {
    isPlaying.value = true;
    audioRef.value.play();
  }
};

</script>

内容的提问来源于stack exchange，提问作者Nopmd