I want to change audio source onClick button. I am trying this but I can't take a result. enter image description here
data() {
return {
audioSrc: ''
}
},
methods: {
setActiveAudio(item) {
this.$refs.audioElm.src = item;
this.$refs.audioElm.currentTime = 0;
this.$refs.audioElm.crossOrigin = 'anonymus';
this.$refs.audioElm.play();
},
},<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<span class="voice-btn" @click="setActiveAudio('../assets/voice.mp3')"> Click Sound</span>
<audio ref="audioElm" :src="audioSrc"></audio>You have to use a timer to make sure the DOM has been updated before you interact with the element like
data() {
return {
audioSrc: ''
}
},
methods: {
setActiveAudio(item) {
this.audioSrc = item;
var element = this.$refs.audioElm;
setTimeout(function()
{
element.currentTime = 0;
element.crossOrigin = 'anonymus';
element.play();
}, 0);
},
}
Working example on https://jsfiddle.net/AndersBillLinden/6x8hzrga/