Question

我正在将NativeScript与Angular 2和最新的Webpack工作流一起使用，并且正在使用iOS Simulator。当我点击按钮时，我正在使用nativescript-audio插件播放声音文件。

我的目标是播放内置在应用程序中的本地声音文件，而无需使用任何互联网连接流式传输或先下载它们。

我已经下载并尝试了所有可以在我自己的应用程序中找到并完全按照其说明进行操作的演示应用程序，但是当我在其他位置引用Web服务器上的声音文件时，只能使插件播放声音。尝试播放本地存储的mp3文件无效。

我还使用了tns-core-modules / file-system模块来搜索我引用的文件，但是在编译的应用程序中的任何地方都找不到该文件。看来文件甚至根本没有包含在构建过程中，我也不知道为什么。

我发现的所有示例应用程序仅播放外部存储在服务器上的文件。他们还都使用了过时的旧版工作流程，而且都没有使用Angular 2系统。

这是我的component.html文件：

<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>

这是我的Angular 2 component.ts文件：

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() }
}

我没有播放声音文件，而是从player.initFromFile诺言中得到了一个错误：

控制台日志文件：///app/vendor.js：59907：39：出了点问题...错误域= NSOSStatusErrorDomain代码= 2003334207“（空）”

系统出现错误：控制台错误file：///app/vendor.js：41405：24：错误错误：未捕获（承诺）：TypeError：null不是对象（正在评估“ _this._player.play”）

据我了解，错误告诉我找不到文件，这似乎是有道理的，因为当我打开已编译的应用程序文件时，找不到任何声音文件。

我的代码本身有问题吗？
如果没有，如何确定文件包含在应用程序的已编译文件中，并确保插件可以找到它？

Answer 1

确保在构建过程中捆绑了音频文件，默认的构建配置不包括mp3文件，而仅包括图像文件，字体和资产。

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)}/**`] },
        ),

使用{ from: { glob: "audio/**" } },更新CopyWebpackPlugin配置也会在构建过程中捆绑您的音频文件夹。

音频播放器插件播放URL声音，但不播放本地声音文件

1 个答案: