'Why does Vue3 need source element in the audio element?

can play mp3. Vue 2 version. but doesn't work with Vue3.

<template>
  <audio
    src="../file_example_MP3_700KB.mp3"
    controls
  ></audio>
</template>

It needs to be done this way with Vue3.

<template>
  <audio controls>
    <source src="../assets/file_example_MP3_700KB.mp3" type="audio/mpeg">
  </audio>
</template>

Why do I need a source element?



Solution 1:[1]

You don't need a source element, if you only provide a single media resources for the <audio> element.

<audio> and <source> are not Vue-specific elements.

The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element (source)

<template>
  <audio
    controls
    src="../assets/file_example_MP3_700KB.mp3">
  </audio>
</template>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tauzN