Show me the full code example here: https://github.com/kenpeter/test_vue_simple_audio_1
Attaching @onmouseup to the input range appears to have an issue. When I drag the slider, the function progressChange does not seem to be triggered.
<input
type="range"
:min="0"
:step="1"
v-model="current"
:value="current"
:max="duration"
@onmouseup="progressChange()"
/>
Below is the section related to methods
methods: {
timeChange: function () {
this.current = this.$refs.player.currentTime;
},
getDuration: function () {
this.duration = this.$refs.player.duration;
},
toggleStatus: function () {
var player = this.$refs.player;
this.isPause ? player.play() : player.pause();
this.isPause = !this.isPause;
},
next: function () {
if (this.audioIndex == this.songs.length - 1) {
if (this.repeat) {
this.audioIndex = 0;
}
} else {
this.audioIndex++;
}
},
prev: function () {
if (this.audioIndex == 0) {
if (this.repeat) {
this.audioIndex = this.songs.length - 1;
}
} else {
this.audioIndex--;
}
},
progressChange() {
console.log("progress change");
},