0

I am using NativeScript with Angular 2 and the newest Webpack workflow, and I'm using the iOS Simulator. I am using the nativescript-audio plugin to play sound files when I tap a button.

My goal is to play local sound files built into the app without using any internet connection to stream them or download them first.

I've downloaded and tried every demo app I can find and followed the instructions exactly in my own app, but I can only get the plugin to play a sound when I reference a sound file on a web server somewhere else. Attempting to play an mp3 file stored locally doesn't work.

I've also used the tns-core-modules/file-system module to search for the file I referenced, but I cannot find the file anywhere in the compiled app. It seems the file is simply not even being included in the build process, and I have no idea why.

All of the example apps I have found only play files stored on a server externally. They also are all using the outdated Legacy workflow, and none of them are using the Angular 2 system.

Here is my component.html file:

<ActionBar class="action-bar">
  <Label class="action-bar-title" text="Sound Page"></Label>
</ActionBar>

<StackLayout orientation="vertical" width="100%" height="100%">
  <Button class="btn btn-primary btn-rounded-sm" id="playButton" text="Play Sound"
    (tap)="onPlayTap($event)"></Button>
</StackLayout>

Here is my Angular 2 component.ts file:

import { Component } from "@angular/core"
import { TNSPlayer } from "nativescript-audio"

const player = new TNSPlayer()
const playerOptions =
{
  audioFile: "~/audio/session_1.mp3",
  loop: false,
  autoplay: false
}

@Component({
  selector: "SongPage",
  moduleId: module.id,
  templateUrl: "./song-page.component.html"
})
export class SongPageComponent {

  constructor()
  {
    player
      .initFromFile(playerOptions)
      .then(res => console.log(res))
      .catch(err => console.log("something went wrong...", err))
  }

  onPlayTap() { player.play() }
}

Instead of the sound file playing, I get an error from the player.initFromFile promise:

CONSOLE LOG file:///app/vendor.js:59907:39: something went wrong... Error Domain=NSOSStatusErrorDomain Code=2003334207 "(null)"

And an error from the system: CONSOLE ERROR file:///app/vendor.js:41405:24: ERROR Error: Uncaught (in promise): TypeError: null is not an object (evaluating '_this._player.play')

From what I understand, the errors are telling me it can't find the file, which appears to make sense because when I open the compiled app file, I can't find a sound file anywhere.

  1. Is there something wrong with my code itself?
  2. If not, how do I make sure the file is included in the app's compiled file and make sure the plugin can find it?
night0w1
  • 3
  • 2

1 Answers1

1

Make sure your audio file is bundled during build, the default build configuration do not include mp3 files but only image files, fonts, and assets.

webpack.config.js

        // Copy assets to out dir. Add your own globs as needed.
        new CopyWebpackPlugin(
            [
                { from: { glob: "assets/**" } },
                { from: { glob: "fonts/**" } },
                { from: { glob: "**/*.jpg" } },
                { from: { glob: "**/*.png" } },
                { from: { glob: "audio/**" } },
            ],
            { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] },
        ),

Updating the CopyWebpackPlugin config with { from: { glob: "audio/**" } }, will bundle your audio folder too during the build.

Manoj
  • 21,753
  • 3
  • 20
  • 41
  • So Webpack *was* the problem. Thank you! I couldn't find anything online about this. This was exactly the solution I needed. – night0w1 Jun 26 '19 at 07:22
  • Webpack is a nice tool once you understand how it works, but of course it drives crazy if you are using it the first time. – Manoj Jun 26 '19 at 07:29
  • In newer versions of webpack I wrote: `webpack.Utils.addCopyRule('app/assets/**/*'); ` – Ricky Levi Apr 03 '22 at 08:46