【微信小程序+VUE2】获取上传音频文件的时长

如果是录音,可以直接获取到音频时长,但如果是上传本地音频文件【wx.chooseMessageFile】,返回的数据如下:

因此要获取音频时长得创建音频上下文,用于获取时长。

// 上传录音文件
uploadRecording(filePath) {
		console.log("上传录音文件", filePath);
        // 如果已有音频时长(说明是录音),则直接上传
		if (this.formTimbreData.durationMinutes) {
			console.log("已有音频时长:", this.formTimbreData.durationMinutes);
			this.uploadFileToServer(filePath);
			return;
		}

		// 创建音频上下文,用于获取时长
		const audioContext = wx.createInnerAudioContext();
		audioContext.src = filePath;
        // 获取音频时长
		audioContext.onCanplay(() => {
			const duration = audioContext.duration;
			console.log(`音频时长: ${duration} 秒`);
			if(duration<10){
				wx.showToast({
					title: "音频时长不能低于10秒",
					icon: "none",
				});
				return;
			}
		// 计算并保存时长(单位:分钟)
		this.formTimbreData.durationMinutes = Math.max(1, Math.round(duration / 60));
		console.log("音频时长(分钟)", this.formTimbreData.durationMinutes);

		// 上传文件
		this.uploadFileToServer(filePath);

		// 销毁音频上下文
		audioContext.destroy();
	});

	// 捕获加载错误
	audioContext.onError((err) => {
		console.error("音频加载错误", err);
		wx.showToast({ title: "无法获取音频时长", icon: "none" });
	});
},

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,能够编译到 iOS、Android、Web(包括微信小程序)以及各种 H5 应用等平台。当涉及到微信小程序时,uni-app 提供了丰富的API和组件,使得开发者能够方便地实现包括音频播放在内的各种功能。 微信小程序音频样式主要是指如何通过小程序的界面和交互设计来展示音频播放的控制和信息。通常,音频样式包括以下几个方面: 1. 播放器的界面布局:这是用户接触的第一层面,通常包括播放/暂停按钮、进度条、声音大小控制、当前播放时间显示以及总时长显示等。开发者可以使用微信小程序提供的组件如 `<audio>` 来实现。 2. 自定义样式:开发者可以使用 CSS 对 `<audio>` 组件进行样式定制,包括颜色、大小、位置以及响应式布局等,以满足不同的设计需求。 3. 交互设计:合理的用户交互设计可以提升用户体验,比如点击封面图可以直接播放音频、长按播放按钮显示更多操作选项等。 微信小程序中,音频组件的使用示例代码如下: ```html <template> <view> <audio id="myAudio" src="your-audio-src.mp3" controls="true" controlsList="nodownload" autoplay="false" loop="false" initial-time="0" preload="auto" poster="your-poster-image.jpg" ></audio> </view> </template> ``` 在上述代码中,`<audio>` 组件用于嵌入音频内容,`src` 属性设置音频文件的 URL,`controls` 属性决定是否显示默认播放控件。`controlsList` 和 `preload` 等属性提供更细粒度的控件定制和播放行为设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值