HarmonyOS H5拉起系统录音能力的样例代码

H5拉起系统录音能力的样例代码。

HarmonyOS

put_get

2024-10-28 10:50:16

浏览

回答 1

按赞同

按时间

zxjiu

可以使用javaScriptProxy()接口或registerJavaScriptProxy()接口实现h5页面与arkts的交互，从而调用音频录能力制相关api。

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-kit-V5?catalogVersion=V5

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/2_3_u97f3_u9891_u5f55_u5236-V5

参考demo：

import web_webview from '@ohos.web.webview';  
import business_error from '@ohos.base';  
import {AudioC} from '../util/audioClass'  
import {AudioRendererC} from '../util/AudioRendererClass'  
import { common, abilityAccessCtrl } from '@kit.AbilityKit';  
@Entry  
@Component  
struct Index {  
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();  
  @State aa:AudioC = new AudioC();  
  @State rr:AudioRendererC = new AudioRendererC()  
  @State userGrant: boolean = false  
  
  async reqPermissionsFromUser(): Promise<number[]> {  
    console.info( 'reqPermissionsFromUser start ')  
    let context = getContext() as common.UIAbilityContext;  
    let atManager = abilityAccessCtrl.createAtManager();  
    let grantStatus = await atManager.requestPermissionsFromUser(context, ['ohos.permission.MICROPHONE']);  
    return grantStatus.authResults;  
  }  
  
  // 申请权限  
  async requestLocationPermission() {  
    let grantStatus = await this.reqPermissionsFromUser()  
    for (let i = 0; i < grantStatus.length; i++) {  
      if (grantStatus[i] === 0) {  
        // 用户授权，可以继续访问目标操作  
        console.info( 'requestPermissionsFromUser success');  
        this.userGrant = true;  
      }  
    }  
  }  
  async aboutToAppear() {  
    await this.requestLocationPermission().then((data)=>{  
      if (this.userGrant) {  
        this.aa.init()  
        this.rr.init()  
      }  
    })  
    try {  
      this.webviewController.registerJavaScriptProxy(this.aa, "aaName", ["init","start","stop","release"]);  
      this.webviewController.registerJavaScriptProxy(this.rr, "rrName", ["init","start","pause","release"]);  
      this.webviewController.refresh();  
    } catch (error) {  
      let e: business_error.BusinessError = error as business_error.BusinessError;  
      console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);  
    }  
  }  
  build() {  
    Column({space:20}) {  
      Web({ src: $rawfile('index.html'), controller: this.webviewController })  
    }  
  }  
}
<!-- index.html -->  
<!DOCTYPE html>  
<html>  
<head>  
    <title>Hello World</title>  
    <style>  
        button {  
        width:300px;  
        height:100px;  
        background-color: #008CBA;  
        padding: 15px 30px;  
        text-align: center;  
        text-decoration: none;  
        font-size: 20px;  
        color: white;  
        }  
        div {  
        padding: 15px 30px;  
        text-align: center;  
        width:100%;  
        }  
    </style>  
</head>  
<body>  
<div>  
    <button type="button" onclick="start()">开始录制!</button>  
    <button type="button" onclick="stop()">结束录制!</button>  
</div>  
<div>  
    <button style="background-color: #555555" type="button" onclick="startR()">开始播放!</button>  
    <button style="background-color: #555555" type="button" onclick="stopR()">停止播放!</button>  
</div>  
  
<p id="demo"></p>  
<script>  
    function start() {  
    aaName.start();  
    console.info('start ok:');  
    }  
    function stop() {  
    aaName.stop();  
    console.info('stop ok:');  
    }  
    function startR() {  
    rrName.start();  
    console.info('startR ok:');  
    }  
    function stopR() {  
    rrName.pause();  
    console.info('stopR ok:');  
    }  
</script>  
</body>  
</html>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.

音频录制相关demo。

import audio from '@ohos.multimedia.audio';  
import { BusinessError } from '@ohos.base';  
import fs from '@ohos.file.fs';  
import promptAction from '@ohos.promptAction';  
class Options {  
  offset?: number;  
  length?: number;  
}  
let context = getContext(this);  
let bufferSize: number = 0;  
let audioCapturer: audio.AudioCapturer | undefined = undefined;  
let audioStreamInfo: audio.AudioStreamInfo = {  
  samplingRate: audio.AudioSamplingRate.SAMPLE_RATE_44100,  
  channels: audio.AudioChannel.CHANNEL_2,  
  sampleFormat: audio.AudioSampleFormat.SAMPLE_FORMAT_S16LE,  
  encodingType: audio.AudioEncodingType.ENCODING_TYPE_RAW  
}  
  
let audioCapturerInfo: audio.AudioCapturerInfo = {  
  source: audio.SourceType.SOURCE_TYPE_MIC,  
  capturerFlags: 0  
}  
  
let audioCapturerOptions:audio.AudioCapturerOptions = {  
  streamInfo: audioStreamInfo,  
  capturerInfo: audioCapturerInfo  
}  
let readDataCallback = (buffer: ArrayBuffer) => {  
  let path = getContext().cacheDir;  
  let filePath = path + '/StarWars10s-2C-48000-4SW.wav';  
  let file: fs.File = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);  
  let options: Options = {  
    offset: bufferSize,  
    length: buffer.byteLength  
  }  
  fs.writeSync(file.fd, buffer, options);  
  bufferSize += buffer.byteLength;  
}  
export class AudioC {  
  // 初始化，创建实例，设置监听事件  
  init() {  
    audio.createAudioCapturer(audioCapturerOptions).then((data) => {  
      audioCapturer = data;  
      console.info('AudioCapturer Created : Success : Stream Type: SUCCESS');  
      if (audioCapturer !== undefined) {  
        (audioCapturer as audio.AudioCapturer).on('readData', readDataCallback);  
      }  
    }).catch((err: BusinessError) => {  
      console.error(`AudioCapturer Created : ERROR : ${err.code}`);  
    });  
  }  
  // 开始一次音频采集  
  start() {  
    if (audioCapturer !== undefined) {  
      let stateGroup = [audio.AudioState.STATE_PREPARED, audio.AudioState.STATE_PAUSED, audio.AudioState.STATE_STOPPED];  
      if (stateGroup.indexOf((audioCapturer as audio.AudioCapturer).state.valueOf()) === -1) { // 当且仅当状态为STATE_PREPARED、STATE_PAUSED和STATE_STOPPED之一时才能启动采集  
        console.error('AudioCapturerDemo start failed');  
        return ;  
      }  
  
      // 启动采集  
      (audioCapturer as audio.AudioCapturer).start((err: BusinessError) => {  
        if (err) {  
          console.error('Capturer start failed.');  
          promptAction.showToast({  
            message:'开启失败'  
          })  
        } else {  
          console.info('Capturer start success.');  
          promptAction.showToast({  
            message:'开始录音'  
          })  
        }  
      });  
    }else {  
      console.info('Capturer start failed');  
    }  
  }  
  // 停止采集  
  stop() {  
    if (audioCapturer !== undefined) {  
      // 只有采集器状态为STATE_RUNNING或STATE_PAUSED的时候才可以停止  
      if ((audioCapturer as audio.AudioCapturer).state.valueOf() !== audio.AudioState.STATE_RUNNING && (audioCapturer as audio.AudioCapturer).state.valueOf() !== audio.AudioState.STATE_PAUSED) {  
        console.info('Capturer is not running or paused');  
        return;  
      }  
  
      //停止采集  
      (audioCapturer as audio.AudioCapturer).stop((err: BusinessError) => {  
        if (err) {  
          console.error('Capturer stop failed.');  
        } else {  
          this.release()  
          console.info('Capturer stop success.');  
        }  
      });  
    }  
  }  
  // 销毁实例，释放资源  
  release() {  
    if (audioCapturer !== undefined) {  
      // 采集器状态不是STATE_RELEASED或STATE_NEW状态，才能release  
      if ((audioCapturer as audio.AudioCapturer).state.valueOf() === audio.AudioState.STATE_RELEASED || (audioCapturer as audio.AudioCapturer).state.valueOf() === audio.AudioState.STATE_NEW) {  
        console.info('Capturer already released');  
        return;  
      }  
      //释放资源  
      (audioCapturer as audio.AudioCapturer).release((err: BusinessError) => {  
        if (err) {  
          console.error('Capturer release failed.');  
        } else {  
          console.info('Capturer release success.');  
          promptAction.showToast({  
            message:'录音结束'  
          })  
        }  
      });  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.

代码中引入的AudioRendererClass为音频播放class (import {AudioRendererC} from '../util/AudioRendererClass')。在h5中调用逻辑与录制相似。

音频播放完整demo参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/using-audiorenderer-for-playback-V5

2024-10-28 15:01:18

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS H5拉起系统录音能力的样例代码

订阅鸿蒙技术特刊，精选内容抢先看