@uni/audio v1.0.2

createAudioContext

API to create and return audio (corresponding to background audio) AudioContext object in the applet. Also known as "foreground audio", the playback stops when the user leaves the page.

Support

Install

$ npm install @uni/audio --save

or

$ npm install @uni/apis --save

Usage

//  基于rax
import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import { createAudioContext } from '@uni/audio';

export default () => {
  const [audioContext, setAudioContext] = useState();
  useEffect(()=> {
    const audioContext = createAudioContext();
  
    audioContext.src = 'https://static.yximgs.com/udata/pkg/miniprogram-outer/test.m4a';
    // 由于某些游览器的一些限制策略 Autoplay policy，h5可能并不会自动播放
    audioContext.autoplay = true; 
    
    audioContext.onPlay(res => {
      console.log('onPlay', res);
    });
  
    audioContext.onPause(res => {
      console.log('onPause', res);
    });
  
    audioContext.onStop(res => {
      console.log('onStop', res);
    });
  
    audioContext.onEnded(res => {
      console.log('onEnded', res);
    });
  
    audioContext.onError(err => {
      console.log('onError', err);
    });
  
    audioContext.onWaiting(res => {
      console.log('onWaiting', res);
    });
    setAudioContext(audioContext);
  }, [])

  const play = () => {
    audioContext.play();
  };
  const pause = () => {
    audioContext.pause();
  };
  const stop = () => {
    audioContext.stop();
  };
  const seek = () => {
    audioContext.seek(30);
  };
  const destroy = () => {
    audioContext.destroy();
  };
  return (
    <View>
      <View onClick={play}>
        <Text>play</Text>
      </View>
      <View onClick={pause}>
        <Text>pause</Text>
      </View>
      <View onClick={stop}>
        <Text>stop</Text>
      </View>
      <View onClick={seek}>
        <Text>seek</Text>
      </View>
      <View onClick={destroy}>
        <Text>destroy</Text>
      </View>
    </View>
  )
}

You can also import from the big package:

import { audio } from '@uni/apis';

const audioContext = audio.createAudioContext();

Method

createAudioContext()

Parameter

Return

return value audioContext。

audioContext Property List

audioContext Non-universal Parameter List (due to the destruction of the multi-code capability, it is not recommended to use)

audioContext Method List

audioContext Non-universal Method List (due to the destruction of the multi-code capability, it is not recommended to use)

src 支持格式

说明：src各个容器具有差异，推荐使用音频格式：AAC，MP3

字节小程序：src仅支持临时路径（如通过下载到本地的音频地址）、网络地址(该地址的域名必须在小程序开发者平台 request 域名白名单中配置)

阿里小程序：音频码，用于直接播放。支持音频格式：AAC，MP3，只支持来源于优酷的音频码。

微信小程序：2.2.3 开始支持云文件ID。

h5: 支持 chooseMedia 选择的临时音频文件、网络地址（有游览器跨域限制），不同的音频格式支持取决于浏览器。

FQA

• 同时播放时是不是只要create 2个AudioContext就可以?

  是的

• 多种特效音需要穿插播放时，是不是create 1个Audio，并且在播放时切换音乐就可以？

  是的,参考demo

  audioContext.src = 'https://static.yximgs.com/udata/pkg/miniprogram-outer/test.m4a';
  
  const change = () => {
    audioContext.src = 'https://b.bdstatic.com/miniapp/images/yanyuan.mp3';
    audioContext.onCanplay(res => {
      console.log('onCanplay');
      audioContext.play();
      audioContext.offCanplay();
    })
  };

• 生命周期的钩子触发顺序是一致的吗？

  onEnd事件：stop 时 h5 也会触发 onEnd 事件，小程序端不会。