uni-app：音频API之uni.createInnerAudioContext()

最新推荐文章于 2024-06-25 07:00:06 发布

Pengwei.Yang

最新推荐文章于 2024-06-25 07:00:06 发布

阅读量1.7k

点赞数 9

文章标签： uni-app 音视频

本文链接：https://blog.csdn.net/XiaoHuiwei/article/details/135251372

版权

uni.createInnerAudioContext()
创建并返回内部 audio 上下文 innerAudioContext 对象

简单实现音频播放，音频图片的旋转与暂停

<template>
	<view>
		<view class="song">
			<view class="song-play margin-top">
				<image class="song-play-image song-play-animation" :class="{'song-play-animation-paused': !isPlay}" :src="pageData.img_url"></image>
				<image class="song-play-icon" :src="isPlay?playImage:pauseImage" @click="clickPlay"></image>
			</view>
		</view>
	</view>
</template>

<script>
	// 创建音频播放器
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				pageData: {
					img_url: "https://p1.music.126.net/y1dxGN45bYIHSjTcacDpgw==/109951169116559827.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0",
				},
				// 是否播放标识
				isPlay: true,
				// 播放/暂停的图标
				playImage: '/static/images/play_1649.png',
				pauseImage: '/static/images/pause_1649.png',
			}
		},
		onLoad() {
			// 初始自动播放音频
			innerAudioContext.autoplay = true
			// 存入音频路径
			innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
			// 监听错误
			this.onError()
		},
		methods: {
			// 点击播放/暂停按钮
			clickPlay() {
				if(this.isPlay) this.onPause()
				else this.onPlay()
			},
			// 监听播放
			onPlay() {
				innerAudioContext.play();
				innerAudioContext.onPlay((res) => {
					this.isPlay = true;
				})
			},
			// 监听暂停
			onPause() {
				innerAudioContext.pause();
				innerAudioContext.onPause((res) => {
					this.isPlay = false;
				})
			},
			// 监听错误
			onError() {
				innerAudioContext.onError((res) => {
					this.isPlay = false
				});
			},
		}
	}
</script>

<style lang="scss">
	.song {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&-play {
			position: relative;
			&-image {
				width: 80vw;
				height: 80vw;
				border-radius: 1000px;
				opacity: .65;
			}
			&-icon {
				position: absolute;
				top: calc(50% - 30px);
				left: calc(50% - 30px);
				width: 60px;
				height: 60px;
				opacity: 1;
			}
		}
	}
	
	/* 图片旋转动画 */
	@keyframes image-trans {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		.song-play-animation {
			animation: image-trans infinite 20s linear;
		}
	}
	/* 音频暂停时，图片暂停旋转 */
	.song-play-animation-paused {
		animation-play-state: paused;
	}
</style>

图片旋转动画

/* 图片旋转动画 */
	@keyframes image-trans {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		.song-play-animation {
			animation: image-trans infinite 20s linear;
		}
	}
	/* 音频暂停时，图片暂停旋转 */
	.song-play-animation-paused {
		animation-play-state: paused;
	}