как воспроизвести два файла одновременно в аудио на родном языке?

Question

Я использую svelte-native, который использует нативный скрипт под капотом.

Я не могу понять, как одновременно воспроизводить два mp3, используя два экземпляра плеера.

AudioPlayer.svelte

      <label text={link.Title}></label>
<flexboxLayout>
    <button on:tap={playAudio}>{command}</button>
</flexboxLayout>

<script lang='ts'>
    import AudioPlay from "~/utils/AudioPlay";
    export let link: { Title: string; url: string };
    let command:string = "play"
    const player = new AudioPlay(`https://calmness.io/audio/${link.url}.mp3`)
    console.log(link)
    function playAudio(){
        player.togglePlay();

    }
</script>

AudioPlay.ts

      import { TNSPlayer } from "nativescript-audio";
export default class AudioPlay {
    private player: TNSPlayer;

    constructor(src: string) {
        this.player = new TNSPlayer()
        this.player.debug = true;
        this.player.initFromUrl({
            audioFile: src, // ~ = app directory
            loop: true,
            completeCallback: this._trackComplete.bind(this),
            errorCallback: this._trackError.bind(this)
        }).then(() => {
            this.player.getAudioTrackDuration().then(duration => {
              // iOS: duration is in seconds
              // Android: duration is in milliseconds
              console.log(`song duration:`, duration);
            });
          });
        
    }

    private _trackComplete(args: any) {
        console.log('reference back to player:', args.player);
        // iOS only: flag indicating if completed succesfully
        console.log('whether song play completed successfully:', args.flag);
    }


    private _trackError(args: any) {
        console.log('reference back to player:', args.player);
        console.log('the error:', args.error);
        // Android only: extra detail on error
        console.log('extra info on the error:', args.extra);
    }
    public togglePlay() {
        if (this.player.isAudioPlaying()) {
            this.player.pause();
        } else {
            this.player.play();
        }
    }


}

Вот страница Home.svelte:

      <script lang="ts">
  import AudioPlayer from "./AudioPlayer.svelte";
  import { Template } from "svelte-native/components";
  import { each } from "svelte/internal";

  let message: string = "Calmness.io";
  let items: string[] = [
    "fire",
    "rain",
    "waves",
    "wind",
    "seagulls",
    "rain",
    "birds",
    "thunder",
    "waves-hawaii-2hr",
    "ambient1",
    "ambient2",
  ];
  let links: { Title: string; url: string }[] = [
    { Title: "Fire", url: "fire" },
    { Title: "Waves", url: "waves" },
    { Title: "Wind", url: "wind" },
    { Title: "Seagulls", url: "seagulls" },
    { Title: "Rain", url: "rain" },
    { Title: "Birds", url: "birds" },
    { Title: "Thunder", url: "thunder" },
    { Title: "Hawaii-Waves", url: "waves-hawaii-2hr" },
    { Title: "Ambient-1", url: "ambient1" },
    { Title: "Ambient-2", url: "ambient2" },
  ];
  let hide: boolean = true;
</script>

<page actionBarHidden={hide}>
  <actionBar title="Profile" />
  <flexboxLayout class="main" flexDirection="column">
    <label class="info">
      <formattedString>
        <span class="fas" text="&#xf135;" />
        <span text=" {message}" />
      </formattedString>
    </label>
    {#each links as link, i}
      <!-- Shows the list item label in the default color and style. -->
      <AudioPlayer {link} />
    {/each}
  </flexboxLayout>
</page>

<style>
  .info .fas {
    color: #5212a5;
  }

  .info {
    font-size: 20;
    color: #ca9ed9;
  }
  .main {
    background-color: #020c30;
    flexdirection: row;
    height: 100%;
  }
</style>