I got error that say "this.function is no a function" when I called the function inside onplay function

[mohamadabdelhady]

I am coding an audio player for my website, I made the function update_seekbar to update the value of the audio_seek variable which is bind to the value of the input type range tag, so the seek bar changes whenever the audio progresses, the update_seekbar function should fire when onplay function is fired which is a holwerjs function that fire whenever the audio begin to play, my problem that I keep getting this error "Uncaught TypeError: this.update_seekbar is not a function" and don't know what is causing it or how to fix it.

`<template>

<div class="song-slider">

<input type="range" :value="audio_seek" class="seek-bar" id="audio-seek">

<span class="current-time">00:00</span>

<span class="song-duration">{{this.get_duration()}}</span>

</div>

</template>

<script>

data()

{

return{

sound:"",

file_path:"/audio_books/audio_files/"+this.file_name+".mp3",

audio_seek:0,

volume:1.0,

}

},

methods:

{

load_audio()

{

this.sound = new Howl({

src: [this.file_path],

html5: true,

autoplay:false,

onplay: function(){

this.update_seekbar();

}

});

},

update_seekbar(){

let seek=this.sound.seek();

this.audio_seek=(((seek / this.sound.duration()) * 100) || 0);

if(this.sound.playing())

{

this.update_seekbar();

}

},

}

<script>`

[lustremedia]

Change this:

` load_audio()

{

this.sound = new Howl({

src: [this.file_path],

html5: true,

autoplay:false,

onplay: function(){

this.update_seekbar();

} `

To:

load_audio()

{

this.sound = new Howl({

src: [this.file_path],
html5: true,
autoplay:false,
onplay: () => {
// => this. <= is not avail in function() but is in ES6  anonymous arrow funct () =>
this.update_seekbar();
}

[lustremedia]

It is a javascript problem not a howlerjs problem ...

[mohamadabdelhady]

@lustremedia ok, thanks for replaying

[lustremedia]

Please close this ticket if it is not further related to howlerjs