Question 360602 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Having Trouble Playing Audio in Vue Template

I tried to use the audio tag through the variable, but it didn’t explore. Please help me.

This is in tag script

<script setup>
import { ref } from 'vue'
import data from '../../../data/game3/data2.json'

const music = ref(data.categories[0].units[0].items[0].pronunciation)

console.log(music.value) //when  log it show ../../assets/pronunciation/apple.mp3 which is the right path

</script>

And this is in template tag

<template>
  <div>
    {{ music }}

    <audio controls>
      <source :src="music" type="audio/mp3" />
    </audio>

    <audio controls>
      <source src="../../assets/pronunciation/apple.mp3" type="audio/mp3" />
    </audio>
  </div>

The first one is not working can you guys help me please. (I’ve tried several browsers and they’re all the same.)

This is what the browser displays.
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I understand that the solution is to make the audio files public so that I may call them dynamically.


  2. 0

    I do not know for sure, but I think that in the first audio tag, source is not known in the time of parsing HTML.
    Maybe you should call a method play on audio element, after it is loaded.

    document.querySelector('audio').load();
document.querySelector('audio').play();

    Also check this question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search