uniapp音乐播放整理

于 2024-05-11 14:55:52 发布
阅读量1.3k 收藏 13
点赞数 22
分类专栏： uniApp 文章标签： uni-app vue.js javascript 前端 小程序 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IO14122/article/details/138715889
版权

一、前置知识点

1.1 音频组件控制-uni.createInnerAudioContext()

创建并返回内部 audio 上下文 innerAudioContext 对象。

主要用于当前音乐播放；

1.1.1 innerAudioContext属性
属性类型说明只读平台差异说明
srcString音频的数据链接，用于直接播放。否微信小程序不支持本地路径
startTimeNumber开始播放的位置（单位：s），默认 0否
autoplayBoolean是否自动开始播放，默认 false否H5端部分浏览器不支持
loopBoolean是否循环播放，默认 false否
obeyMuteSwitchBoolean是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音，默认值 true否微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序、快手小程序（仅在 iOS 上生效）
durationNumber当前音频的长度（单位：s），只有在当前有合法的 src 时返回，需要在onCanplay中获取是
currentTimeNumber当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回，时间不取整，保留小数点后 6 位是
pausedBoolean当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放是
bufferedNumber音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。是
volumeNumber音量。范围 0~1。否
sessionCategoryString设置音频播放模式，可取值：“ambient” - 不中止其他声音播放，不能后台播放，静音后无声音； “soloAmbient” - 中止其他声音播放，不能后台播放，静音后无声音； “playback” - 中止其他声音，可以后台播放，静音后有声音。 默认值为"playback"。否App 3.3.7+
playbackRateNumber播放的倍率。可取值：0.5/0.8/1.0/1.25/1.5/2.0，默认值为1.0否App 3.4.5+（Android 需要 6 及以上版本）、微信小程序 2.11.0、支付宝小程序、抖音小程序 2.33.0+、快手小程序、百度小程序 3.120.2+
1.1.2 innerAudioContext方法列表
方法参数说明
play播放（H5端部分浏览器需在用户交互时进行）
pause暂停
stop停止
seekposition跳转到指定位置，单位 s
destroy销毁当前实例
onCanplaycallback音频进入可以播放状态，但不保证后面可以流畅播放
onPlaycallback音频播放事件
onPausecallback音频暂停事件
onStopcallback音频停止事件
onEndedcallback音频自然播放结束事件
onTimeUpdatecallback音频播放进度更新事件
onErrorcallback音频播放错误事件
onWaitingcallback音频加载中事件，当音频因为数据不足，需要停下来加载时会触发
onSeekingcallback音频进行 seek 操作事件
onSeekedcallback音频完成 seek 操作事件
offCanplaycallback取消监听 onCanplay 事件
offPlaycallback取消监听 onPlay 事件
offPausecallback取消监听 onPause 事件
offStopcallback取消监听 onStop 事件
offEndedcallback取消监听 onEnded 事件
offTimeUpdatecallback取消监听 onTimeUpdate 事件
offErrorcallback取消监听 onError 事件
offWaitingcallback取消监听 onWaiting 事件
offSeekingcallback取消监听 onSeeking 事件
offSeekedcallback取消监听 onSeeked 事件
1.1.3 简单示例
// 创建innerAudioContext对象
const innerAudioContext = uni.createInnerAudioContext();
// 开始自动播放
innerAudioContext.autoplay = true;
// 设置音频地址
innerAudioContext.src = 'url.mp3';
// 开始播放的回调函数
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});
// 播放报错的事件监听
innerAudioContext.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});

1.2 背景音频控制-uni.getBackgroundAudioManager()

获取全局唯一的背景音频管理器 backgroundAudioManager。

主要是实现后台播放功能，退出app或者小程序后还能继续播放，同时状态栏有控制播放状态控件；

1.2.1 backgroundAudioManager属性列表
属性类型说明只读
durationNumber当前音频的长度（单位：s），只有在当前有合法的 src 时返回是
currentTimeNumber当前音频的播放位置（单位：s），只有在当前有合法的 src 时返回是
pausedBoolean当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放是
srcString音频的数据源，默认为空字符串，**当设置了新的 src 时，会自动开始播放，**目前支持的格式有 m4a, aac, mp3, wav否
startTimeNumber音频开始播放的位置（单位：s）否
bufferedNumber音频缓冲的时间点，仅保证当前播放时间点到此时间点内容已缓冲。是
titleString音频标题，用于做原生音频播放器音频标题。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。否
epnameString专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。否
singerString歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。否
coverImgUrlString封面图url，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。否
webUrlString页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。否
protocolString音频协议。默认值为 ‘http’，设置 ‘hls’ 可以支持播放 HLS 协议的直播音频，App平台暂不支持否
playbackRateNumber播放的倍率。可取值：0.5/0.8/1.0/1.25/1.5/2.0，默认值为1.0。(App 3.4.5+、微信基础库 2.11.0+、支付宝小程序、抖音小程序 2.33.0+、快手小程序、百度小程序 3.120.2+)否
1.2.2 backgroundAudioManager方法列表
方法参数说明
play播放
pause暂停
stop停止
seekposition跳转到指定位置，单位 s
onCanplaycallback背景音频进入可以播放状态，但不保证后面可以流畅播放
onPlaycallback背景音频播放事件
onPausecallback背景音频暂停事件
onStopcallback背景音频停止事件
onEndedcallback背景音频自然播放结束事件
onTimeUpdatecallback背景音频播放进度更新事件
onPrevcallback用户在系统音乐播放面板点击上一曲事件（iOS only）
onNextcallback用户在系统音乐播放面板点击下一曲事件（iOS only）
onErrorcallback背景音频播放错误事件
onWaitingcallback音频加载中事件，当音频因为数据不足，需要停下来加载时会触发
1.2.3 简单示例
// 创建bgAudioManager对象
const bgAudioManager = uni.getBackgroundAudioManager();
bgAudioManager.title = '音乐标题';
bgAudioManager.singer = '作者';
bgAudioManager.coverImgUrl = '封面图片';
bgAudioManager.src = 'url.mp3';
// 开始播放的回调函数
bgAudioManager.onPlay(() => {
  console.log('开始播放');
});
// 播放报错的事件监听
bgAudioManager.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});
1.2.4 注意点

注意 因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。

  • ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 "UIBackgroundModes":["audio"] 才能保证音乐可以后台播放（打包成ipa生效）
  • 小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": [“audio”]。发布小程序时平台会审核

二、音乐功能点

2.1 实现效果

  1. 控制播放暂停；
  2. 实现上一首，下一首；
  3. 展示当前音乐当前进度时间，结束时间；展示当前音乐当前进度时间，结束时间；
  4. 可以通过进度条去控制音乐跳转到对应时间点；
  5. 实现倍速播放；
  6. 后台播放；

2.2 获取音乐信息

  1. 当前音乐播放状态；
  2. 音乐列表数据，便于实现上一首下一首；
  3. 当前音乐播放时长，与结束时长，播放速度；
  4. 音乐的地址、封面图片、名称等基础信息；
  5. 歌词展示，到达当前歌词时歌词高亮；

三、实现步骤

3.1 技术选型

通过前置知识点我们了解到了uni.createInnerAudioContext()和uni.getBackgroundAudioManager()的实例属性方法等。

可以根据需求去选择性调用实例，前者可以在小程序中调用来播放音乐；而如果想要退出小程序或者app后依然可以让音乐继续播放，这个时候就可以使用后者来生成悬浮框，以及状态栏中显示；

结论：

  1. 小程序或app中使用uni.createInnerAudioContext()；
  2. 退出小程序或app时使用uni.getBackgroundAudioManager();

3.2 实现思路

根据前面整理的音乐所需功能点，我们需要使用store存储一些全局音乐状态信息；便于切换到其他界面的时候可以同步得到最新的音乐信息。

  1. 首先在程序初始化时，实例化一个audio对象挂载到vue原型上；
  2. 用于实时获取当前播放信息；
  3. 初始化时就可以把需要的监听事件挂载，配合实际业务场景；

3.3 简易代码示例

3.3.1 实例化挂载audio对象

入口文件实例化-main.js

// 新建音乐对象挂载到原型上
const innerAudioContext = uni.createInnerAudioContext();
// 音乐播放报错监听
innerAudioContext.onError((res) => {
  console.log("音乐播放报错监听", res);
});
// 音乐加载中监听
innerAudioContext.onWaiting((res) => {
  console.log("音乐加载中监听", res);
});
Vue.prototype.$AudioContext = innerAudioContext;
3.3.2 定义一个简单的音乐列表
{
// 滚动条信息
playInfo: {
        progressWidth: 2, 	// 滚动条
        currentTime: 0,			// 当前音乐时间s
        currentValue: '00:00', // 转换成时间展示
        duration: 0,				// 当前音乐总时间s
        durationValue: '00:00',	// 总时间转换展示 
    },
// 简易歌曲列表
audioList: [ 
	{
		title: '未完成之前',
		src: 'https://music.163.com/song/media/outer/url?id=1453946527.mp3',
		id: 1453946527,
	}, 
	{
		title: '鲜花',
		src: 'https://music.163.com/song/media/outer/url?id=2086327879.mp3',
		id: 2086327879,
	},
	{
		title: '水星记',
		src: 'https://music.163.com/song/media/outer/url?id=441491828.mp3',
		id: 441491828,
	}, 
	{
		title: '人生有时候懂得放弃',
		src: 'https://music.163.com/song/media/outer/url?id=2139388989.mp3',
		id: 2139388989,
	},
	{
		title: '精卫',
		src: 'https://music.163.com/song/media/outer/url?id=1951069525.mp3',
		id: 1951069525,
	},
],
}
3.3.3 实现暂停播放、切换音乐

在这里插入图片描述

要实现播放音乐首先要给$AudioContext设置音乐地址src，这样才能通过地址去获取对应的音乐信息。

首选需要在页面一加载时默认配置列表中第一首歌的地址：

onLoad() {
	this.$AudioContext.playbackRate = 2;
	if (this.audioList.length) {
		this.$AudioContext.src = this.audioList[this.currentIndex].src;
		this.currentTitle = this.audioList[this.currentIndex].title;
		this.setPlayInfo();
	}
    // 开始播放获取音乐信息
	this.$AudioContext.onPlay((e) => {
		this.setPlayInfo();
	});
	this.$AudioContext.onEnded((e) => {
		// 结束播放去播放下一首
		this.hanleAudioChange();
	});
},

播放按钮： 判断paused的状态选择性去调用播放和暂停方法；

切换音乐： 点击音乐列表行更新音乐地址src，停止当前音乐，最后调用播放方法即可；

// 音乐播放
handlePlay() {
	this.$AudioContext.paused ? this.$AudioContext.play() : this.$AudioContext.pause();
	this.paused = this.$AudioContext.paused;
	this.recursionDeep();
},
// 选择目标音乐播放
handleCurrentAudio(index) {
	this.currentIndex = index;
	this.currentTitle = this.audioList[index].title;
	// 先停止当前音乐
	this.$AudioContext.stop();
	// 更换播放地址
	this.$AudioContext.src = this.audioList[index].src;
	// 播放音乐
	this.handlePlay();
},
3.3.4 进度条功能实现

首先明确功能点：

  1. 根据音乐播放进度条增加，显示当前播放时长和总时长（可以根据定时任务获取最新音乐播放信息）；
  2. 可以拖动选择特定位置播放（通过touchmove与touchend事件监听实现）；
  3. 点击某一位置直接跳转对应位置播放（通过点击事件获取x轴位置）
// 递归循环获取最新音乐进度信息
recursionDeep() {
	clearTimeout(this.timer);
	if (this.paused) {
		return
	};
	this.timer = setTimeout(() => {
		if (!this.isMove) {
			this.setPlayInfo();
			this.recursionDeep();
		}
	}, 500)
},
// 进度条点击事件
progressClick(event) {
	const {
		x
	} = event.detail;
	const progressWidth = Math.floor(x / this.progressParentWidth * 100);
	this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;
	console.log("event", event);
	this.progressMouseDown();
},
// 音乐进度条移动监听
progressMouseMove(event) {
	if (!this.$AudioContext.src) {
		return;
	}
	this.isMove = true;
	const {
		pageX
	} = event.changedTouches[0];
	const progressWidth = Math.floor(pageX / this.progressParentWidth * 100);
	this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;
},
// 音乐进度条停止监听
progressMouseDown(event) {
	this.isMove = false;
	const currentTime = Math.floor(this.$AudioContext.duration * (this.playInfo.progressWidth / 100));
	this.$AudioContext.seek(currentTime);
	this.setPlayInfo();
	if (!this.$AudioContext.paused) {
		this.$AudioContext.pause();
	}
	this.handlePlay();
},

四、完整源码示例

4.1 示例图

在这里插入图片描述

4.2 main.js入口函数

import App from './App'

import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'

// 新建音乐对象挂载到原型上
const innerAudioContext = uni.createInnerAudioContext();
// 音乐播放报错监听
innerAudioContext.onError((res) => {
  console.log("音乐播放报错监听", res);
});
// 音乐加载中监听
innerAudioContext.onWaiting((res) => {
  console.log("音乐加载中监听", res);
});
Vue.prototype.$AudioContext = innerAudioContext;


const app = new Vue({
  ...App
})
app.$mount()

4.3 index.vue界面

<template>
	<view class="content">
		<scroll-view class="main-container" scroll-y>
			<view class="line_box" :class="currentIndex === index ? 'line_box bgc_line' : 'line_box'"
				v-for="(item, index) in audioList" :key="item.id" @click="handleCurrentAudio(index)">
				{{item.title}}
			</view>
		</scroll-view>
		<view class="audio_box">
			<view class="current_title" v-show="currentTitle">
				当前播放歌曲：{{currentTitle}}
			</view>

			<view class="music-progress-bar" @click="progressClick">
				<view class="progress-bar-line" :style="{width: playInfo.progressWidth + '%'}" @touchmove="progressMouseMove"
					@touchend="progressMouseDown"></view>
			</view>
			<view class="show_time">
				<view>{{playInfo.currentValue}}</view>
				<view>{{playInfo.durationValue}}</view>
			</view>
			<view class="audio_control">
				<view @click="hanleAudioChange('pre')">上一首</view>
				<view @click="handlePlay">{{ paused ? '播放' : '暂停'}}</view>
				<view @click="hanleAudioChange('next')">下一首</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				currentTitle: '未完成之前',
				currentIndex: 0,
				paused: true,
				isMove: false,
				playInfo: {
					progressWidth: 2, // 滚动条
					currentTime: 0, // 当前音乐时间s
					currentValue: '00:00', // 转换成时间展示
					duration: 0, // 当前音乐总时间s
					durationValue: '00:00', // 总时间转换展示 
				},
				audioList: [{
						title: '未完成之前',
						src: 'https://music.163.com/song/media/outer/url?id=1453946527.mp3',
						id: 1453946527,
					},
					{
						title: '鲜花',
						src: 'https://music.163.com/song/media/outer/url?id=2086327879.mp3',
						id: 2086327879,
					},
					{
						title: '水星记',
						src: 'https://music.163.com/song/media/outer/url?id=441491828.mp3',
						id: 441491828,
					},
					{
						title: '人生有时候懂得放弃',
						src: 'https://music.163.com/song/media/outer/url?id=2139388989.mp3',
						id: 2139388989,
					},
					{
						title: '精卫',
						src: 'https://music.163.com/song/media/outer/url?id=1951069525.mp3',
						id: 1951069525,
					},
				],
				progressParentWidth: 0,
			}
		},
		onLoad() {
			this.$AudioContext.playbackRate = 2;
			if (this.audioList.length) {
				this.$AudioContext.src = this.audioList[this.currentIndex].src;
				this.currentTitle = this.audioList[this.currentIndex].title;
				this.setPlayInfo();
			}
			this.$AudioContext.onPlay((e) => {
				// 开始播放获取音乐信息
				this.setPlayInfo();
			});
			this.$AudioContext.onEnded((e) => {
				// 结束播放去播放下一首
				this.hanleAudioChange();
			});
		},
		onShow() {
			this.$nextTick(async () => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.music-progress-bar').boundingClientRect(data => {
					this.progressParentWidth = data ? Math.floor(data.width) : 0;
				}).exec();
			});

		},
		onUnload() {
			// 卸载时关闭监听
			this.$AudioContext.offPlay();
			this.$AudioContext.offPlay();
		},
		methods: {
			// 进度条点击事件
			progressClick(event) {
				const {
					x
				} = event.detail;
				const progressWidth = Math.floor(x / this.progressParentWidth * 100);
				this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;
				console.log("event", event);
				this.progressMouseDown();
			},
			// 音乐进度条移动监听
			progressMouseMove(event) {
				if (!this.$AudioContext.src) {
					return;
				}
				this.isMove = true;
				const {
					pageX
				} = event.changedTouches[0];
				const progressWidth = Math.floor(pageX / this.progressParentWidth * 100);
				this.playInfo.progressWidth = progressWidth > 100 ? 100 : progressWidth;
			},
			// 音乐进度条停止监听
			progressMouseDown(event) {
				this.isMove = false;
				const currentTime = Math.floor(this.$AudioContext.duration * (this.playInfo.progressWidth / 100));
				this.$AudioContext.seek(currentTime);
				this.setPlayInfo();
				if (!this.$AudioContext.paused) {
					this.$AudioContext.pause();
				}
				this.handlePlay();
			},
			// 音乐播放
			handlePlay() {
				this.$AudioContext.paused ? this.$AudioContext.play() : this.$AudioContext.pause();
				this.paused = this.$AudioContext.paused;
				this.recursionDeep();
			},
			// 选择目标音乐播放
			handleCurrentAudio(index) {
				this.currentIndex = index;
				this.currentTitle = this.audioList[index].title;
				// 先停止当前音乐
				this.$AudioContext.stop();
				// 更换播放地址
				this.$AudioContext.src = this.audioList[index].src;
				// 播放音乐
				this.handlePlay();
			},
			// 递归循环获取最新音乐进度信息
			recursionDeep() {
				clearTimeout(this.timer);
				if (this.paused) {
					return
				};
				this.timer = setTimeout(() => {
					if (!this.isMove) {
						this.setPlayInfo();
						this.recursionDeep();
					}
				}, 500)
			},
			// 秒转换为分钟
			secondsToMinutesWithSeconds(seconds) {
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = Math.floor(seconds % 60);
				return `${this.padZero(minutes)}:${this.padZero(remainingSeconds)}`;
			},
			// 补零
			padZero(number, length = 2) {
				var str = "" + number;
				while (str.length < length) {
					str = "0" + str;
				}
				return str;
			},
			// 设置播放对象
			setPlayInfo() {
				const currentTime = this.$AudioContext.currentTime || 0;
				const duration = this.$AudioContext.duration || 0;
				const progressWidth = duration === 0 ? '2' : Math.floor((currentTime / duration) * 100);
				const currentValue = this.secondsToMinutesWithSeconds(currentTime);
				const durationValue = this.secondsToMinutesWithSeconds(duration);
				this.playInfo = {
					currentTime,
					duration,
					progressWidth,
					currentValue,
					durationValue
				};
			},
			// 切换歌曲
			hanleAudioChange(type = 'next') {
				if (type === 'pre') {
					this.currentIndex = this.currentIndex === 0 ? this.audioList.length - 1 : this.currentIndex - 1;
				} else {
					this.currentIndex = this.currentIndex === this.audioList.length - 1 ? 0 : this.currentIndex + 1;
				};
				this.$AudioContext.src = this.audioList[this.currentIndex].src;
				this.currentTitle = this.audioList[this.currentIndex].title;
				// 播放歌曲
				this.handlePlay();
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: calc(100vh - 44px - env(safe-area-inset-top));
		background-color: #1A262D;
		color: #fff;
	}

	.main-container {
		width: 100vw;
		height: 46vh;
	}

	.line_box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 92%;
		height: 60px;
		border-radius: 8px;
		margin: 10px auto;
		border: 2px solid #eee;
		background-color: aquamarine;
		color: #333;
		font-weight: bold;
	}

	.audio_control {
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: #333;
		margin-top: 40px;
	}

	.audio_control view {
		width: 100px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #edeeab;
		border: 1px solid #eee;
		border-radius: 6px;
	}

	.audio_box {
		width: 90%;

		margin: 30px auto;
	}

	.current_title {
		margin-bottom: 20px;
		font-weight: bold;
		font-size: 18px;
	}

	.bgc_line {
		background-color: #e1964b;
	}

	.show_time {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	// 音乐进度条
	.music-progress-bar {
		position: relative;
		width: 100%;
		height: 6rpx;
		border-radius: 6rpx;
		background-color: #f3e7d9;

		.progress-bar-line {
			position: absolute;
			top: 0%;
			left: 0%;
			width: 2%;
			height: 100%;
			border-radius: 6rpx;
			background-color: #e1964b;
		}

		.progress-bar-line::after {
			content: "";
			display: inline-block;
			position: absolute;
			right: 0%;
			top: 50%;
			transform: translateY(-50%);
			width: 20rpx;
			height: 20rpx;
			background-color: #fff;
			border-radius: 50%;
		}
	}
</style>

4.4 项目源码地址

https://gitee.com/yangdacongming/implementation-of-uniapp-music.git

懒羊羊我小弟
关注
  • 22
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp微信小程序实现网易云音乐
07-28
使用uniapp实现的仿网易云音乐的微信小程序，可正常在微信开发者工具中运行，音乐播放，页面展示，跳转等功能
uni-music:uniapp音乐播放器
05-05
uniMusic 因服务器到期, 演示程序不能正常使用,大家可以按照下面写的步骤,直接使用自己的服务运行 Description uni-app音乐播放器, 页面参照网易云音乐 此项目前端使用框架 服务端使用自建的 github: dcloud插件市场: 欢迎Star :glowing_star::glowing_star::glowing_star:, 如果遇到问题或建议请提Issue Run 渲染引擎: weex 编译器版本: V3 (参考) 页面编译模式: uni-app 组件模式 请确保你的HbuilderX版本在2.5.1以上 目前仅支持APP端运行, 如有其他端需求请自己修改, 有任何问题可以在issues区和微信互相交流 将NVUE目录拖入HbuilderX中运行到手机或模拟器 测试账号 16605123405, 密码随便填写 建议自己搭建服务端, 搭建好之后修改本项目config.js中的HOST地址为你自己的服务地址即可 本项目登录及注册流程可
uniapp中的uni.createInnerAudioContext() 音频创建
最新发布
m0_73035846的博客
04-15 462
1. 因为做的小程序需要视频讲解 默认展示播放按钮，当点击播放的时候 显示暂停音乐这样的一个效果。写了一个简单的点击事件。
网易云音乐播放器移动端项目源码基于uniapp多端开发,音乐播放、进度、缓存进度条监听，视频播放、上下滑动切换、加载相关同类视频
01-13
基于uniapp多端开发网易云音乐播放器移动端项目源码,音乐播放、进度、缓存进度条监听，视频播放、上下滑动切换、加载相关同类视频.《移动应用开发》小组项目
uniapp 仿网易云音乐播放器 微信小程序
ZL3064436257的博客
06-14 2915
uniapp 仿照网易云播放器,微信小程序
uni-app技术分享| uni-app转小程序_实时音视频
anyRTC的博客
04-07 3168
uniapp转小程序_实时音视频 微信小程序 实现实时音视频与 uniapp 转码成微信小程序 实现实时音视频两者是一样的，区别仅仅是一个是原生小程序一个是 uniapp 转码成小程序 本文使用uniapp转码成小程序实现音视频通话 前提 确保微信开发平台 =》开发 =》开发管理 =》接口设置 的 实时播放音视频流与实时录制音视频流开启 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvSzutl4-1649304145472)(./3.jpg)] 线上版本配置 an
uniapp关闭/开启/调节系统声音
qq_27342239的博客
08-24 3374
代码如下 plus.device.setVolume(0) // 静音 plus.device.setVolume(0.6) // 开启声音，0 - 1 plus.device.getVolume() // 获取当前音量
uniapp之音频播放器
weixin_72222776的博客
03-25 5553
uniapp音频播放器
uniapp：播放音频（uni.createInnerAudioContext()）
sunluyi的博客
03-19 7743
uni.createInnerAudioContext() src 音频的数据链接，用于直接播放。 play 播放（H5端部分浏览器需在用户交互时进行） onEnded 音频自然播放结束事件 onShow() { var music = null; music = uni.createInnerAudioContext(); //创建播放器对象 music.src = '../../static/1.mp3'; // static文件夹下的音频 music.play(); //执行播放
uniapp：音乐播放器
sunluyi的博客
03-12 785
音乐播放
uniapp 点击播放音乐（音频）
byf5229的博客
06-19 3176
uniapp通过uni.createInnerAudioContext()获取音频的信息。通过innerAudioContext.autoplay = true;通过innerAudioContext.loop=true;使用play() 播放方法时，加入定时器，可以变得相对于稳定的使用。通过innerAudioContext.src=”音乐地址“play()播放和pause()暂停。
uni-app-video(支持后台播放音频)
02-24
uni-app-video(支持后台播放音频) demo实现思路： 正常唤起video组件播放，支持倍速等操作，全屏时提供开启后台播放音频； page hide时，后台播放audio标签，倍速恢复1.0正常播放；
uniapp音频组件（audioQuickPlay.vue）
08-04
uniapp音频组件（audioQuickPlay.vue）
uni-app-music(支持全局播放音频).zip
10-16
uni-app-music(支持全局播放音频).zip
uniapp 录音 上传 播放
06-26
给儿子做了一个好习惯养成的微信小程序，其中有一个功能是朗读随机抽取的文章，需要录音、上传到服务器，然后家长能听到录音。...其中录音用到uniapp的RecorderManager（不支持H5），播放用到InnerAudioContext
带进度条的音乐播放器
01-22
小程序 简单 使用
uniapp背景音乐管理
zhaowenxue的博客
03-20 1487
1.效果是退出当前页面或者后台运行app时候音乐照常播放，但是不能在其他页面切换歌曲或者暂停，音乐列表自动循环，播放完所有歌曲自动停止 2.我的歌曲列表自定义的 3.音乐列表代码，样式就不放了 4.先在onload里面获取一下背景音乐的API，不知道的可以看uniapp官方的文档 uni.getBackgroundAudioManager() 5.事件，先获取音乐列表，并椎动操控数据，往里面添加isshow控制播放和停止的图标，time控制音乐的时间，目前时间从0开始，播放完会展示播放了多久，播放下一首
uniapp 播放音频
热门推荐
明耀的博客
09-11 1万+
//../../static/image/login_bg.png console.log("=====testClick====="); let src = '../../static/voice/test.mp3'; //实例化声音 const Audio = uni.createInnerAudioContext(); Audio.autoplay = true; Audio.src = src; //音频地址 Audio.play();
uniapp音乐播放
08-27
UniApp是一个跨平台的开发框架，可以用于开发多种类型的应用程序，包括音乐播放器。在UniApp中，你可以使用第三方插件或自己编写代码来实现音乐播放功能。 一种常见的实现方式是使用uni-audio组件，它是UniApp的内置组件，可以用于播放音频文件。你可以在页面中引入该组件，并设置音频文件的路径，然后通过调用uni-audio组件的方法来控制音乐的播放、暂停、停止等操作。 另一种方式是使用第三方插件，比如uni-mpvue-audio插件或uni-audio插件。这些插件提供了更多的功能和更好的用户体验，例如可以显示歌曲封面、歌词等。 不过需要注意的是，在使用uni-audio组件或第三方插件时，你需要先将音频文件准备好，并确保其合法性和版权问题。 希望这个回答对你有帮助！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值