MediaSession

前端框架>= 0.6.19 Waft >= 1.5

mediaSession是控制多媒体播放的API，支持前景播放和背景播放两种模式。

constructor(type: MediaSessionTypes)

说明：一个应用内可同时拥有前景播放和背景播放的多个实例，并且前景音和背景音允许混合播放；但全局最多只会有一个前景音和一个背景音。

import { MediaSession, MediaSessionTypes, MediaMetadata } from 'waft';
const m1 = new MediaSession(MediaSessionTypes.FRONT); // 或者 new MediaSession()

set metaData

设置媒体信息。

import { MediaSession, MediaSessionTypes, MediaMetadata } from 'waft';

const args = new JSONObject();
args.set("src", 'https://ai-open-platform.oss-cn-hangzhou.aliyuncs.com/chem.mp3');
m1.metadata = new MediaMetadata(args);

setAudioConfig

1.5版本开始支持
设置音频播放的配置信息。设置完后会立即生效。

let config = new JSONObject();
config.set('mixWithOther', true);
config.set('volume', m4Volume);
m1.setAudioConfig(config);

play

1.5版本开始支持
开始播放。

m1.play();

pause

1.5版本开始支持
暂停播放。

m1.pause();

stop

1.5版本开始支持
停止播放，并在适当时清除状态(如：播放进度)。

m1.stop();

destroy

1.5版本开始支持
销毁MediaSession的实例。
一般场景下，前端业务无需调用该API，容器层在前端页面退出时，会做销毁操作；但如果前端一个页面内会频繁的创建MediaSession实例，从内存角度考虑，应该主动将不再用的实例destroy掉。

m1.destroy();

seekTo(position: i32)

1.5版本开始支持
跳转到指定位置。
注意：seekTo 只在音频已经播放后才有效。

m1.seekTo(60)

setVolume(volume: f32)

1.5版本开始支持
设置播放音量。

m1.setVolume(0.5)

get metaData

获取当前的媒体元信息。

返回值（MediaMetaData）

const metaData = m1.metaData;

getPlaybackState

1.5版本开始支持
获取当前播放状态。

返回值（JSON格式）

m1.getPlaybackState();

getPositionState

1.5版本开始支持
获取当前播放进度。

返回值（JSON格式）

m1.getPositionState();

setMetadataListener

1.5版本开始支持
监听播放器正在播放的媒体信息。

m1.setMetadataListener((data) => {
  console.log('setMetadataListener:' + data.toString())
});

setPlaybackStateListener

1.5版本开始支持
监听播放状态的变化。

m1.setPlaybackStateListener((data) => {
  console.log('setMetadataListener:' + data.toString())
});

setPositionStateListener

1.5版本开始支持
监听播放进度的变化。

m1.setPositionStateListener((data) => {
  console.log('setMetadataListener:' + data.toString())
});

clearMetadataListener

1.5版本开始支持
清除 Metadata 变化的监听。

m1.clearMetadataListener()

clearPlaybackStateListener

1.5版本开始支持
清除对播放状态变化的监听。

m1.clearPlaybackStateListener()

clearPositionStateListener

1.5版本开始支持
清除对播放进度的监听。

组件演示

axml

<view class="wrapper">
  <x-nav-bar showArrow="{{true}}" title="{{title}}"/>
  <view class="flex">
    <view class="btn"><x-button size="large" click="play"  type="primary" text="播放"></x-button></view>
    <view class="btn"><x-button size="large" click="pause" class="btn" type="primary" text="暂停"></x-button></view>
    <view class="btn"><x-button size="large" click="stop" class="btn" type="primary" text="停止"></x-button></view>
  </view>
</view>

ts

import { JSON, JSONObject } from "waft-json";
import { console, aliGenie, Page, Props, Event, MessageEvent, MediaSession, MediaSessionTypes, MediaMetadata } from "waft";

// 支持class写法
let _this: Index;
const m1 = new MediaSession(MediaSessionTypes.FRONT);
const args = new JSONObject();
args.set("src", 'https://ai-open-platform.oss-cn-hangzhou.aliyuncs.com/chem.mp3');
m1.metadata = new MediaMetadata(args);
export class Index extends Page {
  constructor(props: Props){
    super(props);
    _this = this;
      //播放audio
      this.addEventListener("play", (event: Event)=>{
        m1.play();
      });
      //暂停audio播放
      this.addEventListener("pause", (event: Event)=>{
        m1.pause();
      });
      //停止audio播放
      this.addEventListener("stop", (event: Event)=>{
        m1.stop();
      }); 
  }
  onShow(): void{
    // 页面显示
  }
  onLoad(query: JSONObject): void{
    // 页面加载后
    console.log('page onLoad:' + JSON.stringify(query));
  }
  onMessage(event: MessageEvent): void{
    // 信息推送更新
    console.log('page onMessage:' + JSON.stringify(event.data));
    // 如果需要进行更新界面
    if(event.data.has("dataSource")){
      this.setState(event.data.getObject("dataSource"));
    }
  }
}