Audio in vue.js


#1

Hi! How i can work with audio files in nativescript vue.js?


#2

I would recommend using Brad Martin’s NativeScript Audio plugin: https://market.nativescript.org/plugins/nativescript-audio


#3

Hello, thank you for answer. I’m trying use this plagin. But when i import him in component i get Error: com.tns.NativeScriptException: Failed to find module: “nativescript-audio/options”, relative to: app/tns_modules/

My code

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Sound"></ActionBar>
    <StackLayout>
    </StackLayout>
  </Page>
</template>

<script>
import audio from "nativescript-audio";

  export default {

  }
</script>

I’m try to use “require” instead “import”. But it didn’t help. Can you tell me how i can force to work this plugin?


#4

Hi, i resolve previus problem. Bun now i have new problem. When i create new examplare of TNSPlayer i get error: TypeError: Cannot read property ‘getSystemService’ of undefined

This is my code:

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Sound"></ActionBar>
    <StackLayout>
    </StackLayout>
  </Page>
</template>

<script>
  const audio = require('nativescript-audio');
  const player = new audio.TNSPlayer();
</script>

And this is full error:
An uncaught Exception occurred on “main” thread.
java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:

Error calling module function

TypeError: Cannot read property ‘getSystemService’ of undefined
File: "file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js, line: 332, column: 40

StackTrace:
Frame: function:‘TNSPlayer._requestAudioFocus’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 332, column: 41
Frame: function:‘TNSPlayer’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 46, column: 41
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169498
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169167
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 135552
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 133319
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘e.exports.e’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 511
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 521
Frame: function:‘require’, file:’’, line: 1, column: 266

TypeError: Cannot read property ‘getSystemService’ of undefined
File: ", line: 1, column: 265

StackTrace:
Frame: function:‘TNSPlayer._requestAudioFocus’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 332, column: 41
Frame: function:‘TNSPlayer’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 46, column: 41
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169498
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169167
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 135552
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 133319
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘e.exports.e’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 511
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 521
Frame: function:‘require’, file:’’, line: 1, column: 266

at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5406)
at android.app.ActivityThread.-wrap2(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1545)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6119)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)

Caused by: com.tns.NativeScriptException:

Error calling module function

TypeError: Cannot read property ‘getSystemService’ of undefined
File: "file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js, line: 332, column: 40

StackTrace:
Frame: function:‘TNSPlayer._requestAudioFocus’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 332, column: 41
Frame: function:‘TNSPlayer’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 46, column: 41
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169498
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169167
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 135552
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 133319
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘e.exports.e’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 511
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 521
Frame: function:‘require’, file:’’, line: 1, column: 266

TypeError: Cannot read property ‘getSystemService’ of undefined
File: ", line: 1, column: 265

StackTrace:
Frame: function:‘TNSPlayer._requestAudioFocus’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 332, column: 41
Frame: function:‘TNSPlayer’, file:‘file:///data/data/org.nativescript.application/files/app/tns_modules/nativescript-audio/android/player.js’, line: 46, column: 41
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169498
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 169167
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘Object.defineProperty.value’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 135552
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 133319
Frame: function:‘t’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 161
Frame: function:‘e.exports.e’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 511
Frame: function:’’, file:‘file:///data/data/org.nativescript.application/files/app/app.js’, line: 1, column: 521
Frame: function:‘require’, file:’’, line: 1, column: 266

at com.tns.Runtime.runModule(Native Method)
at com.tns.Runtime.runModule(Runtime.java:530)
at com.tns.Runtime.run(Runtime.java:522)
at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1024)
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5403)
... 8 more

Can you help me?


#5

That’s this line. Looks like there’s no Android app context available at the moment this code runs.

One can argue the plugin should harden against this, but you can probably fix it by waiting for the app launch event, or wrapping it in a setTimeout.


#6

Let’s cc @bradwaynemartin, the author of the plugin.


#7

Version 4.3.5 was just published with an approach to hopefully solve this in the plugin itself by guaranteeing the context is grabbed before calling the native method. Please try it and let me know of any issues.


#8

I’m use setTimeout to resolve this problem. But now looks like its work fine without setTimeout. Thanks!
Also in old version prorepty “volume” always return “11”. Set works fine, and volume is change, but get always return “11”. I dont testing this with new version. When I testing volume prop with new version i’m let you know.
P.S. Sorry for my English)


#9

Hi, bug with volume get isn’t fixed in new version.
This is my code:

const audio = require('nativescript-audio'); // init audio plugin
        this.player = new audio.TNSPlayer(); // init audio player
        this.player.initFromFile(this.playerOptions).then((result) => {
          this.player.volume = 0.000001;
          console.dir(this.player.volume);
        }); // set options to audio player

Aloso isn’t work set volume to 0. Accordingly i set volume to 0.000001. Hope i help you to do your plugin better))