uni-app 获取音频文件二进制流

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 获取音频文件二进制流

获取音频文件的二进制流,用于阿里云语音识别上传

3 回复

可以做,联系QQ:1804945430


这里有现成的 可以做,联系QQ: 1196097915

在uni-app中,获取音频文件的二进制流通常涉及文件选择、读取和转换等步骤。下面是一个使用uni-app框架的示例代码,展示如何从用户选择的音频文件中获取二进制流。

1. 页面模板(.vue文件)

<template>
  <view>
    <button @click="chooseAudio">选择音频文件</button>
    <view v-if="audioBinaryData">
      <text>音频文件已选择,二进制数据长度:{{ audioBinaryData.length }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioBinaryData: null,
    };
  },
  methods: {
    chooseAudio() {
      uni.chooseMessageFile({
        count: 1,
        type: 'audio',
        extension: ['mp3', 'wav'],
        success: (res) => {
          const tempFilePaths = res.tempFiles;
          this.readFileAsArrayBuffer(tempFilePaths[0].path);
        },
        fail: (err) => {
          console.error('选择音频文件失败:', err);
        },
      });
    },
    readFileAsArrayBuffer(filePath) {
      uni.getFileSystemManager().readFile({
        filePath: filePath,
        encoding: 'binary',
        success: (result) => {
          this.audioBinaryData = result.data;
          console.log('音频文件二进制数据:', this.audioBinaryData);
        },
        fail: (err) => {
          console.error('读取音频文件失败:', err);
        },
      });
    },
  },
};
</script>

<style>
/* 添加一些简单的样式 */
button {
  margin: 20px;
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

2. 解释

  • 页面模板:包含一个按钮用于选择音频文件和一个视图用于显示二进制数据的长度。
  • 数据audioBinaryData 用于存储音频文件的二进制数据。
  • 方法
    • chooseAudio:调用 uni.chooseMessageFile 方法让用户选择音频文件,并获取文件的临时路径。
    • readFileAsArrayBuffer:使用 uni.getFileSystemManager().readFile 方法读取文件的二进制数据,并存储在 audioBinaryData 中。
  • 样式:为按钮添加了一些简单的样式。

3. 注意事项

  • 确保在 manifest.json 中已经配置了相关权限,例如文件读写权限。
  • uni.chooseMessageFile 方法返回的 tempFiles 数组中的每个元素包含文件的临时路径和其他信息。
  • uni.getFileSystemManager().readFile 方法的 encoding 参数设置为 'binary' 以获取二进制数据。

以上代码示例展示了如何在uni-app中获取音频文件的二进制流,并可以在实际应用中根据需要进行进一步处理。

回到顶部