useAudio

音频操作等.

何时使用

当需要进行音频操作时

API

const [audioContext, { sources, setOption, play }] = useAudio(initOptions);

参数说明

以下均为initOptions

参数	说明	类型	默认值
autoplay	是否自动开始播放 (若指定后面可与新的配置合并)	boolean	false
loop	是否循环播放 (若指定后面可与新的配置合并)	boolean	false
src	音频资源的地址，用于直接播放(若指定后面可与新的配置合并)	string	-
volume	音量。范围 0~1(若指定后面可与新的配置合并)	number	1
startTime	开始播放的位置（单位：s），默认为 0 (若指定后面可与新的配置合并)	number	0
mixWithOther	是否与其他音频混播(若指定后面可与新的配置合并)	boolean	-
obeyMuteSwitch	是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音 (若指定后面可与新的配置合并)	boolean	true

返回值说明

返回值	说明	类型
audioContext	全局唯一音频实例	InnerAudioContext
sources	当前支持的音频输入源	getAvailableAudioSources.SuccessCallbackResult['audioSources']
setOption	设置音频实例	(option?: Partial<initOptions>) => Promise<General.CallbackResult>
play	播放(可指定播放文件 src)	(src?: string) => void

代码演示

React

media/useAudio/index

import React from 'react';
import { useState } from '@taro-hooks/core';
import { useToast, useRecord, useAudio } from 'taro-hooks';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const [audioSource, setAudioSource] =
    useState<Taro.RecorderManager.OnStopCallbackResult>();

  const [audioContext, { play }] = useAudio();
  const [, { start, stop }] = useRecord();

  const { show } = useToast({
    title: 'useVoice',
    duration: 500,
    mask: true,
  });

  const handleStop = async () => {
    try {
      show({ title: '正在停止', duration: 20000000 });
      const result = await stop();
      setAudioSource(result);

      show({ title: '停止录制成功' });
    } catch (e) {
      show({ title: '停止录制失败', icon: 'error' });
    }
  };

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => start()}
        shape="square"
      >
        开始录制
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => handleStop()}
        shape="square"
      >
        结束录制
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        disabled={!audioSource?.tempFilePath}
        onClick={() => play(audioSource?.tempFilePath)}
        shape="square"
      >
        播放音频
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        disabled={!audioSource?.tempFilePath}
        onClick={() => audioContext?.stop?.()}
        shape="square"
      >
        停止播放音频
      </Button>
    </DemoContent>
  );
};

Vue

media/useAudio/index

<template>
  <demo-content>
    <nut-button shape="square" type="primary" class="gap" block @click="start()"
      >开始录制</nut-button
    >
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="handleStop()"
      >结束录制</nut-button
    >
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      :disabled="!audioSource?.tempFilePath"
      @click="play(audioSource?.tempFilePath)"
      >播放音频</nut-button
    >
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      :disabled="!audioSource?.tempFilePath"
      @click="audioContext?.stop?.()"
      >停止播放音频</nut-button
    >
  </demo-content>
</template>

<script setup lang="ts">
import { useState } from '@taro-hooks/core';
import { useToast, useRecord, useAudio } from 'taro-hooks';

const [audioSource, setAudioSource] =
  useState<Taro.RecorderManager.OnStopCallbackResult>();

const [audioContext, { play }] = useAudio();
const [, { start, stop }] = useRecord();

const { show } = useToast({
  title: 'useVoice',
  duration: 500,
  mask: true,
});

const handleStop = async () => {
  try {
    show({ title: '正在停止', duration: 20000000 });
    const result = await stop();
    setAudioSource(result);

    show({ title: '停止录制成功' });
  } catch (e) {
    show({ title: '停止录制失败', icon: 'error' });
  }
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️

FAQ

• 注意: iOS 在静音状态下, innerAudio会遵循静音原则无声音. 若需要在静音状态下播放声音. 可增加配置项如下

  {
    obeyMuteSwitch: false;
  }