uni-app uni.createInnerAudioContext()音频播放使用

uni-app使用 uni.createInnerAudioContext()音频播放api

前言
1.我这边主要是在微信小程序上使用所以我不太清楚到App或H上有没有问题,不过应该可以。
2.我这边只记录一下主要功能和方法。
3.本文主要做记录使用,有任何不对的地方请大佬指正。

效果图如下:
效果图
在这里插入图片描述
解读:
如图所示这是一个音频播放页面,基本功能如下:播放暂停,快进快退,文件切换,当前文件播放结束自动播放下一个文件。

正文:
1.播放样式(文件切换样式我就不放了,就放个进度条这个):

<view class="audio-container">
	<view class="audio-play" @tap="changePlayState">//暂停和播放事件
		<image class="image"  :src="audioPlay ? '暂停图片' : '播放图片'"></image>
	</view>
	<view class="audio-slider">
		<view class="audio-time">
			<text>{{currentTimeStr}}</text>//进度时间
		</view>
		//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">
			<text>{{timeStr}}</text>//总时间
		</view>
	</view>
</view>

2.创建实例

//录音实例
creatAudio() {
	this.innerAudioContext = uni.createInnerAudioContext();//创建实例
	this.innerAudioContext.autoplay = true;//设置是否自动播放
	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;
		
		//进度条最大值
		this.sliderMax = this.formatSecond(duration);
	});
},

3.点击暂停播发事件

// 录音暂停播放
changePlayState() {
	if (this.audioPlay == false) {
		this.innerAudioContext.play();
	} else {
		this.innerAudioContext.pause()
	}
},

4.快进快退

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

5.点击列表切换

// 文件切换播放
filechange(item, i) {
	this.innerAudioContext.destroy()
	this.csdFileindex=i;
	this.recordPath = item.recordPath;
	this.sliderMax = this.getTime(item.recordDuration);
	this.timeStr = this.getTime(item.recordDuration);
	this.creatAudio()
},

6.自动切换事件

// 自动播放下一个文件
qeihuanwenjian(){
	let index=this.csdFileindex+1;
	if(index<this.luyinList.length){
		this.csdFileindex=index;
		let item=this.luyinList[this.csdFileindex];
		let i=this.csdFileindex;
		this.filechange(item,i)
	}
},

7.播放进度转换成时间 00:01 – 00:02 – 00:03…

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;
},

8.转化总时长

/**
* 格式化时间 
* @param {String} date 原始时间格式
* 格式后的时间:hh:mm:ss
**/
const 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;
}

结尾: 整体比较潦草就真的是简单记录下

  • 16
    点赞
  • 64
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
要在 uni-app Vue3 的 setup 语法糖中使用 `uni.createInnerAudioContext()`,并封装成一个可在其他页面中使用的组件,可以按照以下步骤进行操作: 1. 首先,在你的项目中创建一个新的文件夹,用来存放组件相关的文件。例如,可以创建一个名为 `AudioPlayer` 的文件夹。 2. 在 `AudioPlayer` 文件夹中创建一个名为 `index.vue` 的文件,作为组件的主文件。 3. 在 `index.vue` 中定义组件的模板和样式,并在 `script` 部分使用 `setup` 语法糖来编写组件的逻辑。 ```vue <template> <div> <button @click="play">播放</button> <button @click="pause">暂停</button> <button @click="stop">停止</button> </div> </template> <script> import { ref, onMounted, onUnmounted } from 'vue' export default { setup() { const audio = uni.createInnerAudioContext() const play = () => { audio.src = 'path/to/audio.mp3' audio.play() } const pause = () => { audio.pause() } const stop = () => { audio.stop() } onMounted(() => { // 在组件挂载后执行一些初始化操作 }) onUnmounted(() => { // 在组件卸载前执行一些清理操作 audio.destroy() // 销毁音频实例 }) return { play, pause, stop } } } </script> <style scoped> /* 组件的样式 */ </style> ``` 4. 在需要使用音频播放组件的页面中,引入并使用 `AudioPlayer` 组件。 ```vue <template> <div> <audio-player></audio-player> </div> </template> <script> import AudioPlayer from '@/components/AudioPlayer' export default { components: { AudioPlayer } } </script> <style scoped> /* 页面的样式 */ </style> ``` 现在,你就成功地将 `uni.createInnerAudioContext()` 封装成了一个可在其他页面中使用的组件。在页面中使用 `<audio-player></audio-player>` 标签就可以调用音频播放功能了。记得根据你的项目需求进行相应的配置和修改。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值