安装

npm install nativescript-ezaudio --save

使用

重要： 确保在 Page 元素上包含 xmlns:ez="nativescript-ezaudio"

// main-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:ez="nativescript-ezaudio"
  loaded="pageLoaded">
  <AbsoluteLayout width="100%" height="100%">
    <ez:AudioPlot 
      class="audioPlot" 
      plotColor="{{audioPlotColor}}" 
      plotType="{{audioPlotType}}" 
      fill="{{audioPlotFill}}" 
      mirror="{{audioPlotMirror}}" 
      bufferData="{{audioPlotBufferData}}" />
    <Button text="{{btnTxt}}" tap="{{toggleCurrentTrack}}" />
  </AbsoluteLayout>
</Page>

// app.css
.audioPlot {
  width:100%;
  height:100%;
  background-color: #000;
  top:0;
  left:0;
}
button {
  font-size: 22;
  horizontal-align: center;
  margin:20px 0;
  color:#FFF803;
  top:20;
  left:0;
  width:100%;
}

// main-page.ts
import {AudioDemo} from "./main-view-model";

function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = new AudioDemo(page);
}
exports.pageLoaded = pageLoaded;

// main-view-model.ts
import {Observable} from 'data/observable';
import {TNSEZAudioPlayer} from 'nativescript-ezaudio';

export class AudioDemo extends Observable {
  public btnTxt: string = 'Play Track';
  
  // AudioPlot
  public audioPlotColor: string = '#FFF803';
  public audioPlotType: string = 'buffer';
  public audioPlotFill: boolean = true;
  public audioPlotMirror: boolean = true;
  public audioPlotBufferData: any;
  
  // internal
  private _player: any;
  private _currentTrackIndex: number = 0;
  private _tracks: Array<string> = [
    `any-mp3-you-like.mp3`,
  ];

  constructor(page: any) {
    super();
    this._player = new TNSEZAudioPlayer(true);
    this._player.delegate().audioEvents.on('audioBuffer', (eventData) => {
      this.set('audioPlotBufferData', {
        buffer: eventData.data.buffer,
        bufferSize: eventData.data.bufferSize
      });
    });
  }

  public toggleCurrentTrack() {
    this._player.togglePlay(this._tracks[this._currentTrackIndex]);
    this.toggleBtn();  
  }
  
  private toggleBtn() {
    this.set(`btnTxt`, `${this._player.isPlaying() ? 'Stop' : 'Play'} Track`);
  }
}

屏幕截图

示例 1	示例 2

示例 3	示例 4

TNSEZAudioPlayer

基于 EZAudioPlayer 的 AudioPlayer。

创建

// Option 1: simple
this._player = new TNSEZAudioPlayer();

// Option 2: advanced
// passing true to constructor will let the player know it should emit events
this._player = new TNSEZAudioPlayer(true);

// it allows you to listen to events like so:
this._player.delegate().audioEvents.on('audioBuffer', (eventData) => {
  this.set('audioPlotBufferData', {
    buffer: eventData.data.buffer,
    bufferSize: eventData.data.bufferSize
  });
});

方法

事件	描述
`togglePlay(fileName?: string, reloadTrack?: boolean)`: `void`	允许在轨道上切换播放/暂停，以及重新加载当前轨道或加载新轨道。第一次总是加载轨道并播放。 `fileName` 代表您资源中文件的路径。 `reloadTrack` 可用于重新加载当前轨道或加载新轨道。
`pause()`: `void`	暂停轨道
`isPlaying()`: `boolean`	确定播放器是否正在播放轨道
`duration()`: `number`	以秒为单位的长度
`formattedDuration()`: `string`	格式化的持续时间，'00:00' 格式
`totalFrames`: `number`	加载轨道中的总帧数
`formattedCurrentTime`: `string`	格式化的当前时间，'00:00' 格式
`setCurrentTime(time: number)`: `void`	通过帧编号设置当前时间
`seekToFrame(frame: number)`: `void`	将播放头移动到指定的帧编号
`volume()`: `number`	获取当前音量
`setVolume(volume: number)`: `void`	设置音量。必须在 0 - 1 之间。
`pan()`: `number`	获取当前声像设置
`setPan(pan: number)`: `void`	设置左右声像。必须在 -1（左）和 1（右）之间。0 是默认值（居中）。
`device()`: `any`	获取当前输出设备

事件

事件	描述
`audioBuffer`	当音频文件播放时，获取 `buffer` 和 `bufferSize` 以设置 `AudioPlot` 的 `bufferData`
`position`	当前帧编号
`reachedEnd`	当达到文件末尾时
`changeAudioFile`	当音频文件更改或设置时
`changeOutput`	当输出设备更改时
`changePan`	当声像更改时
`changeVolume`	当音量更改时
`changePlayState`	当播放器状态更改时，例如播放/暂停
`seeked`	当音频文件已跳转到特定的帧编号时

TNSEZRecorder

基于 EZRecorder 的录音器。

创建

this._recorder = new TNSEZRecorder();

// it allows you to listen to events like so:
this._recorder.delegate().audioEvents.on('audioBuffer', (eventData) => {
  this.set('audioPlotBufferData', {
    buffer: eventData.data.buffer,
    bufferSize: eventData.data.bufferSize
  });
});

方法

事件	描述
`record(filePath: string)`: `void`	记录一个 `.m4a` 文件。传递一个绝对文件路径。
`stop()`: `void`	停止录音
`isRecording()`: `boolean`	确定录音器是否正在录音
`deviceInputs()`: `Array<any>`	输入设备集合
`setDevice(device:any)`: `void`	设置输入设备

事件

事件	描述
`audioBuffer`	在录制过程中，获取`buffer`和`bufferSize`来设置`AudioPlot`的`bufferData`
`recordTime`	当前录制时间

UI 组件

AudioPlot

显示音频波形并提供修改其显示的属性。

示例

<ez:AudioPlot plotColor="#fff" plotType="buffer" fill="true" mirror="true" bufferData="{{audioPlotBufferData}}" />

属性

属性	值
`plotColor`: `string`	波形颜色。任何rgb十六进制值，例如。#fff
`plotType`: `string`	`buffer`或`rolling`
`fill`: `boolean`	使波形用颜色填充。当`false`时，它看起来更像线条。
`mirror`: `boolean`	是否镜像波形顶部/底部。
`bufferData`: `Object`	一个表示音频文件`buffer`和`bufferSize`的对象。参见示例实现

贡献者

NathanaelA

为什么使用以TNS开头的名称？

TNS代表Telerik NativeScript

iOS使用以NS开头的类（源自古老的NeXTSTEP时代）：https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/

为了避免与iOS原生类混淆，使用TNS。

许可证

MIT