uniapp 上传音频(H5可以App不行),并播放后端返回的音频

2023-11-20

1.上传

record() {
				let _this = this
				uni.chooseFile({
					count: 1, //默认100
					extension: ['.m4a', '.mp3'], //根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。
					success: function(res) {
						
						var tempFilePaths = res.tempFilePaths;
						console.log(res)
						console.log(JSON.stringify(tempFilePaths));
						_this.saveRecord(tempFilePaths[0])
					}
				});

			},
			saveRecord(param) {
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: 'xxxx', // 上传地址
					filePath: param, // 要上传的文件路径
					name: 'file', // 上传文件对应的 key 值
					formData: {
						"file": param,   //接口需要的参数
						"type": 'recording'
					},
					header: {
						'Authorization': "Bearer " + JSON.parse(uni.getStorageSync('USERS_KEY')).access_token,
					},
					success: function(uploadRes) {
						// 上传成功处理逻辑
						console.log(uploadRes);
						uni.hideLoading();
						uni.showToast({
							title: '上传成功'
						});
					},
					fail: function(error) {
						// 上传失败处理逻辑
						console.log(error);
						uni.hideLoading();
						uni.showToast({
							title: '上传失败'
						});
					}
				});
			},

2.播放

<view  v-for="(recordList,recordIndex) in list":key="'record'+recordIndex" @click="changeState(recordList,recordIndex)">
	<view>
			<view >{{recordList.name}}</view>						
	</view>
</view>

<view class="playRadioClass">
	<view class="audio-play" @click="changeRecordPic">
			<image class="image" :src='recordUrl'></image>
	</view>

	<view class="audio-slider">

		<!-- min进度从0开始    sliderMax进度最大值   sliderChangeComplate快进快退事件   sliderValue播放进度 -->
		<slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate"
											block-size="14" :value="sliderValue" activeColor="blue"></slider>
				<view class="audio-time" style="float: left;">
						<text>{{currentTimeStr}}</text>
				</view>
				<view class="audio-time" style="float: right;">
						<text>{{timeStr}}</text>
				</view>
		</view>
</view>
export default {
		computed: {},
		data() {
			return {
				currentTimeStr: '00:00',
				sliderMax: undefined,
				sliderValue: '',
				timeStr: '',
				audioPlay: false,
				recordUrl: '@/../../../static/img/common/play.png',
				innerAudioContext: '',
				csdFileindex: '',
				recordPath: '',
				'list': [{
						'url': `https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3`
						
							},
							{
								'url': 'xxxx&download=Y',
							}
						]
			}
		},
		watch: {
			'audioPlay': {
				handler(newVal, oldVal) {

					if (this.audioPlay == true) {
						this.recordUrl = '@/../../../static/img/common/play.png'
					} else {
						this.recordUrl = '@/../../../static/img/common/stop.png'
					}
				},
				deep: true,
				// immediate: true
			},
		},
		methods: {
			//录音实例
			creatAudio() {
				this.innerAudioContext = uni.createInnerAudioContext(); //创建实例
				this.innerAudioContext.src = this.recordPath; //音频的url
				this.innerAudioContext.onPlay(() => {
					// 播放监听
					// console.log('播放!');
					this.audioPlay = true;
				});
				this.innerAudioContext.onPause(() => {
					// 暂停监听
					// console.log('暂停播放!');
					this.audioPlay = false

				});
				this.innerAudioContext.onEnded(() => {
					// 结束播放监听
					// console.log('播放结束!');
					this.audioPlay = false;
					//自动切换事件
					// this.qeihuanwenjian()
				});
				this.innerAudioContext.onTimeUpdate(() => {
					const {
						currentTime,
						duration
					} = this.innerAudioContext; //这俩参数是这个api自带的参数

					const currTimeStr = this.formatTime(currentTime);
					this.sliderValue = parseInt(currentTime);

					// 变动的时间
					this.currentTimeStr = currTimeStr;
					console.log("持续", duration)

					//进度条最大值
					this.sliderMax = duration;
					this.timeStr = Math.round(duration) + 's';
					// this.sliderMax = 0;
				});


			},

			changeRecordPic(item) {
				// 			let self = this
				if (this.audioPlay == false) {
					this.innerAudioContext.play();
				} else {
					this.innerAudioContext.pause()
				}
			},

			// 文件切换播放
			changeState(item, i) {
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.csdFileindex = i;
				this.recordPath = item.url;
				this.creatAudio()

				// console.log(this.innerAudioContext)
				// this.sliderMax = xxx;
				// this.timeStr = xxxx;
				this.innerAudioContext.play();
			},
			formatTime(num) {
				//格式化时间格式
				num = num.toFixed(0);
				let second = num % 60;
				if (second < 10) second = '0' + second;
				let min = Math.floor(num / 60);
				if (min < 10) min = '0' + min;
				return min + ":" + second;
			},
			formatSecond(seconds) {
				var h = Math.floor(seconds / 3600) < 10 ? '0' + Math.floor(seconds / 3600) : Math.floor(seconds / 3600);
				var m = Math.floor((seconds / 60 % 60)) < 10 ? '0' + Math.floor((seconds / 60 % 60)) : Math.floor((
					seconds / 60 % 60));
				var s = Math.floor((seconds % 60)) < 10 ? '0' + Math.floor((seconds % 60)) : Math.floor((seconds % 60));
				return h + ":" + m + ":" + s;
			},

			//音频前进回退
			sliderChangeComplate(e) {
				const currTimeStr = this.formatTime(e.detail.value)
				this.currentTimeStr = currTimeStr
				this.innerAudioContext.seek(e.detail.value);
				this.innerAudioContext.play();
			},


		},
	}
</script>

<style lang="scss" scoped>
	

	.playRadioClass {
		display: flex;
		flex-direction: row;
		align-items: center;

		.audio-play {
			image {
				width: 100rpx;
				height: 100rpx;
			}

		}

		.audio-slider {
			width: calc(100% - 100rpx);
		}
	}

</style>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp 上传音频(H5可以App不行),并播放后端返回的音频 的相关文章

  • leetcode-分割字符串的方案数

    给你一个二进制串 s 一个只包含 0 和 1 的字符串 我们可以将 s 分割成 3 个 非空 字符串 s1 s2 s3 s1 s2 s3 s 请你返回分割 s 的方案数 满足 s1 s2 和 s3 中字符 1 的数目相同 由于答案可能很大
  • 密码学理论10:密钥管理和公钥革命

    加密密钥分发 对称密码 依赖于秘密密钥的安全分发 需要存储和管理大量密钥 在开放 公共系统中遇到严重问题 部分解决方案 密钥分发中心 KDC 某些服务器 密钥分发中心 KDC 将密钥 提供 给用户 它与每个用户共享一个秘密密钥 长期密钥 并
  • 计算机系统攻击 ms17-010漏洞利用技术 永恒之蓝复现

    概述 MS17 010是指微软于2017年发布的一个安全公告编号为MS17 010的漏洞 也被称为 EternalBlue 该漏洞影响了微软的Windows操作系统 并且被发现可被利用来进行远程代码执行攻击 这个漏洞的危险性在于它允许攻击者
  • 基于Docker搭建FastDFS分布式文件系统

    1 镜像拉取 docker pull morunchang fastdfs 2 运行 docker run d name tracker net host morunchang fastdfs sh tracker sh 3 运行stora

随机推荐

  • Python下拉选框

    看了我密码器讲解的朋友们一定知道 里面有个叫下拉选框的知识 今天我就来讲讲下拉选框 from PyQt5 QtWidgets import QWidget QLabel QComboBox QApplication import sys c
  • 数据分箱3——决策树分箱(有监督)

    思路比较简单 将某一列数据作为训练集 将label作为结果 直接训练一个决策树 然后根据决策树的分裂节点的阈值作为分箱的依据 sklearn的决策树文档 https scikit learn org stable modules gener
  • CSS 实现不规则元素的阴影

    大伙在工作中 尤其写页面样式 相信很多地方用到 box shadow 阴影属性 但是这个属性只能用到规则的元素上 亦或者说只能用到一个元素上 那当我们遇到不规则的元素时 想加阴影就比较棘手了 但是 CSS 提供了此问题的解决方案 今天 我们
  • Using TensorFlow backend.

    运行代码总是出现以下几个问题 但是代码能运行出来 问题一 Using TensorFlow backend 问题二 WARNING Logging before flag parsing goes to stderr 问题三 Spyder中
  • 【转载】三维重建(三)相机参数标定与光束平差法(Bundle Adjustment)

    https blog csdn net lhanchao article details 51867327 转载于 https www cnblogs com hhxxgdd p 11140712 html
  • 【Milvus的以文搜图】

    0 介绍 以文搜图指的是 根据文本描述 从图像数据库中检索与文本内容相似的图像数据并返回 通过在CSDN中搜索以文搜图 找到了如下两篇文章 从零到一 教你搭建 以文搜图 搜索服务 一 Zilliz Planet的博客 CSDN博客 以文搜图
  • 如何实现Obsidian笔记云同步?

    在上一篇文章使用Obsidian工具编辑 管理永久笔记 写作实践中介绍 个人免费版Obsidian仅支持在本地以Markdown文件的形式管理笔记 因此使用者只能在一台电脑上编辑 使用笔记 如果你只是在个人电脑上编辑 使用Obsidian笔
  • vue递归组件的使用

    管理系统的菜单栏 相信大家都有见过 都免不了有一级二级 等等 层级是不确定的 是后台数据决定的 这时我们就要用到递归组件了 首先我们来谈谈 组件的name属性 1 递归组件的调用 2 keep alive中使用include和exclude
  • linux下查看进程启动、运行的时间等命令

    可通过ps 来查看 通过参数 o 来查看 ps eo pid tty user comm lstart etime grep redis 参数说明 pid 进程ID tty 终端 user 用户 comm 进程名 lstart 开始时间 e
  • SpringBoot启动微服务报错Consider defining a bean of type ‘org.springframework.data.redis.core.RedisTemplate

    最近遇到一个问题 项目之前使用了Redis 可正常启动 然后最近对Redis部分进行了一些微调 再启动服务提示如下错误 Consider defining a bean of type org springframework data re
  • 通过无人机技术,搭建边防无人机基站实现边境巡防系统的构思。

    本篇文章主要讲解 利用无人机技术 信息化技术 图像识别技术实现边境巡防一体化监控系统的构思 日期 2023年7月7日 作者 任聪聪 要知道祖国的疆域是异常庞大的 边境线的长度也是一个庞大的数字 依靠铁丝网又或者岗哨等传统的方式实际上存在很大
  • Go语言写的选择排序

    选择排序是不稳定的排序算法 不稳定发生在最小元素与A i 交换的时刻 比如序列 5 8 5 2 9 一次选择的最小元素是2 然后把2和第一个5进行交换 从而改变了两个元素5的相对次序 package main import fmt 选出最大
  • 版本控制工具SVN配置及使用

    1 官网下载 http subversion apache org packages html window TortoiseSVN为客户端 VisualSVN为服务器 下载可能需要VPN 服务器选择上面的选项 2 安装和配置 2 1服务器
  • mysql的rpm文件安装顺序问题_MySQL 5.6.17 rpm 文件安装顺序

    Linux系统安装MySQL时 将MySQL 5 6 17 1 el6 x86 64 rpm bundle tar包打开 有7个rpm文件 如下 MySQL client 5 6 17 1 el6 x86 64 rpmMySQL devel
  • UFT 小飞机测试

    1 1 新建GUI测试 1 2 录制 点击小红点或者菜单上的录制 任选一个 找到小飞机的文件地址 选择小飞机 地址可以参考我的目录 之后就点击确定 之后的每一步都要亲自用鼠标进行点击录制 包括下拉框的选择 选择好后点击Insert Orde
  • 集合的初始容量与扩容

    arraylist 0 50 linkedlist 0 链表每次加一 hashmap 16 加载因子0 75 超过容量的0 75才会进行扩容 扩容 容量的2倍 2 当某个桶的链表长度达到8 就转成红黑树
  • Java 常用的大算法详解

    Java 常用的大算法详解 排序算法是计算机科学中的重要主题之一 Java 提供了许多常用的排序算法 本文将详细介绍其中的几种 并提供相应的源代码实现 冒泡排序 Bubble Sort 冒泡排序是一种简单直观的排序算法 它重复地遍历待排序的
  • [LeetCode-100]-Same Tree(判断两颗二叉树是否相同)

    文章目录 0 题目相关 1 Solution 0 题目相关 题目解读 给定两颗二叉树 对这两颗二叉树进行比较 判断这两棵二叉树是否相同 原题描述 原题链接 Given two binary trees write a function to
  • @PostConstruct和线程池导致事务问题

    测试一个xxl job 遇到问题事务问题 情景再现 使用 PostConstruct注解来测试 由于是上传素材 比较耗时 所以使用了线程池 一切很顺利的是时候 保存日志的时候报了个错 org springframework transact
  • uniapp 上传音频(H5可以App不行),并播放后端返回的音频

    1 上传 record let this this uni chooseFile count 1 默认100 extension m4a mp3 根据文件拓展名过滤 每一项都不能是空字符串 默认不过滤 success function re