Can I programmatically play audio?

[mikethewolf83]

Can I programmatically play audio? I mean by function instead by the controls? For example, I hide controls with:

:audio-controls="false"

The lets say by means of a function y play audio...can be done?

Thanks

[staskobzar]

You can have external element and use direct audio javascript API to play/pause. See "ref-link" in the documentation

[ChileNetwork]

How you will do that?

[titushartm]

Thanks, that also works for changing the current audio time!

<audio
  :src="blobUrl + '#t=00:03:26'"
  controls
  ref="foo"
  preload="auto"
></audio>
<av-waveform
  ref-link="foo"
  :canv-width="500"
  :canv-height="120"
  :playtime-line-width="0.8"
  :playtime-with-ms="false"
></av-waveform>

[Julien-cpsn]

Hello !

Since ref-link isn't working on my side, I've found a solution, use the the .audio object of your <av-... /> tag eg :

<av-waveform
  ref="channel1"
  
  canv-class="full-width"
  :canv-height="25"
  
  audio-src="songs/andale.mp3"
  :audio-controls="false"
  :playtime="false"
  />

this.$refs.channel1.audio.play()
this.$refs.channel1.audio.pause()

[loneyao]

vue3 JSON.parse(JSON.stringify(currentInstance.ctx.$refs. channel1)) Audio. play() not found

[titushartm]

try this one:

watch(
  // pretend you have a getData getter in store
  () => audioStore.playing,
  (oldVal) => {
    // if playing = true
    if (oldVal) {
      // set time of audio element
      audioRef.value.play();
    } else {
      //else false
      audioRef.value.pause();
    }
  }
);

got the original idea from here: https://stackoverflow.com/questions/67775761/vue3-composition-api-watch-store-value