uniapp:获取手机本地音频文件
时间: 2025-06-27 11:15:29 浏览: 11
在UniApp中获取手机本地音频文件,主要是通过调用原生API或者借助第三方插件库来实现。以下是常见的几种方式:
### 方式一:使用`uni.chooseImage()`选择后再转码
虽然这个方法主要用于图片的选择,但是部分系统也允许用户从所有媒体类型里选取,包括音频。
不过需要注意的是这种方式并不是直接针对音频设计的,在实际应用过程中可能会受到设备限制,并不是最佳实践。
### 方式二:基于`plus.io`
对于H5+环境下的项目来说,可以利用`plus.io`操作系统的IO功能读取指定目录内容,再过滤出其中的音频文件提供给用户浏览、预览及上传等功能。
```javascript
function getAudioFiles() {
var audioExt = ['.mp3', '.wav']; // 可以根据需要添加更多支持格式
plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {
entry.getDirectory('Music', {}, function(dirEntry){
dirEntry.createReader().readEntries(function(entries){
let files = entries.filter(item =>
audioExt.some(ext => item.name.toLowerCase().endsWith(ext))
);
console.log(files);
});
}, (e)=>console.error(e));
},(e)=>console.error(e));
}
```
> 这段代码会尝试访问名为"Music"的文件夹并列出其下所有的音频文件。
>
> **注意**:由于安全原因,某些版本的操作系统可能不允许应用程序无条件地遍历用户的整个存储空间;另外,不同品牌型号的移动终端存放音乐的位置也可能有所区别,请务必做好充分测试!
### 方式三:利用官方组件`<picker mode="media">`
这是最推荐的方式之一,它能够方便快捷地让用户挑选手机内的多媒体资源(包含但不限于图像和声音)。设置mode属性值为'media'并且配合acceptType筛选器就可以轻松完成任务了。
```html
<picker mode="media" @change="bindChange">
<view class="btn-area">点击这里</view>
</picker>
```
```js
export default {
data(){
return {};
},
methods:{
bindChange(res){
const tempFilePath = res.tempFiles[0].path;
console.log(tempFilePath); // 输出临时路径供后续处理
}
}
};
```
以上就是三种可以在UniAPP环境下用于取得移动端装置内部储存之音讯档案信息的方法简介啦~每种都有各自的优缺点以及适用范围哦~
阅读全文
相关推荐


















