CODEWITHSUNDEEP
vue.jsaudiovuejs2nativescriptnativescript-vue
asanas
asanas

Reputation: 4280

Audio Player in NativeScript-Vue

I have an mp3 playlist and I want to play these audio tracks in an audio player in NativeScript-Vue. However, there is no plugin for it.

However, there is a NativeScript plugin nativescript-audio which can be used for playing audio.

In the following Playground example, you will notice that it has been adopted to play in a NativeScript-Vue application.

https://play.nativescript.org/?template=play-vue&id=83Hs3D&v=19

This can work, however, the problem is that the player is mounted in the mounted() hook, and even the mp3 file path is supplied there. However, for me, the mp3 file is loaded asynchronously, added to a Vuex store, and then available as computed property in the component.

How can I adopt this code to take the mp3 file from a computed property rather than hard-coded in mounted()?

Here is the documentation for this plugin - https://github.com/bradmartin/nativescript-audio

Upvotes: 0

Views: 803

Answers (1)

asanas
asanas

Reputation: 4280

I was able to find a solution.

  1. Watch your computed property. Let's say it's called media.

  2. On change, update the audio track using the following code:

    const playerOptions = { audioFile: this.media, loop: false, autoplay: false } this._player .playFromUrl(playerOptions) .then(function(res) { console.log(res); }) .catch(function(err) { console.log('something went wrong..', err); });

Upvotes: 1

Related Questions