uni-app(踩坑第三篇):音频Api之uni.createInnerAudioContext()-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app(踩坑第三篇):音频Api之uni.createInnerAudioContext()。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni.createInnerAudioContext()

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

最近在写一个仿网易云的项目，使用uni.createInnerAudioContext()封装了一个音频组件

#myaudio.vue

主要实现了图片旋转以及音乐的播放和暂停

有没有大佬指教一番的让我涨涨知识

uni.createinneraudiocontext(),uni-app,uni-app

<template>
	<view class="myaudio">
		<!-- 歌曲海报 -->
		<view class="musicimage" @click="changetomusic">
			<image class="appLogo"
				src="https://img2.baidu.com/it/u=3181851593,3353679262&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=292"
				mode=""></image>
		</view>
		<!--  歌曲名称-->
		<view class="musictext" @click="changetomusic">
			{{text}}
		</view>
		<!-- 播放按钮 -->
		<view class="musiconplay">
			<view class="iconfont icon-bofanganniu" v-if=" iconshow ? false:true" @click="changeto">

			</view>
			<view class="iconfont icon-zanting" v-if=" iconshow ? true:false" @click="changeto">

			</view>
		</view>
		<!-- 列表按钮 -->
		<view class="musiclist">
			<view class="iconfont icon-bofangliebiao">
				<!-- v-if=" iconshow ? true:false" @click="changeto" -->
			</view>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext() //想要实现暂停功能就要把该对象变为全局属性
	export default {
		name: 'myaudio',
		data() {
			return {
				iconshow: false,
				text: '红玫瑰 - 陈奕迅',
				url: "https://dl.stream.qqmusic.qq.com/C400003LnSNo1ecdc3.m4a?guid=358840384&vkey=4998179E3E27FCEC1CADA69ACE26BA5DF979E8F05291153DC32F77C7C50C3213C5668EA838E705063B448C983A777DD574E945B3FBECA0D0&uin=&fromtag=120032",
				currenttime: 0
			}
		},
		methods: {
			changeto() {
				this.iconshow = !this.iconshow
				console.log(this.iconshow);
				if (this.iconshow) {
					innerAudioContext.src = this.url;
					innerAudioContext.seek(this.currenttime)
					innerAudioContext.volume = 0.5
					innerAudioContext.play()
					
				} else {
					innerAudioContext.pause()
					this.currenttime = innerAudioContext.currentTime
				}


			},
			changetomusic() {
				uni.navigateTo({
					url: "/pages/bofang/bofang"
				})
			},

		}
	}
</script>

<style lang="scss">
	@import url("../../static/iconfont/iconfont.css");

	// https://img2.baidu.com/it/u=3181851593,3353679262&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=292
	.myaudio {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;

		.musicimage {
			width: 15%;
			padding: 0;
			margin: 0;
			height: 100%;
			background-color: black;
			border-radius: 50%;

			.appLogo {
				position: relative;
				top: 7px;
				left: 7px;
				width: 70%;
				height: 70%;

				border-radius: 50%;
			}
		}

		.musictext {
			width: 55%;
			height: 100%;
			padding-left: 10px;
			font-size: 15px;
			line-height: 50px;
			text-align: left;
		}

		@keyframes App-logo-spin {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		@media (prefers-reduced-motion: no-preference) {
			.appLogo {
				animation: App-logo-spin infinite 20s linear;
			}
		}

		.musiconplay {
			width: 15%;
			height: 100%;

			.icon-bofanganniu {
				cursor: pointer;
				font-size: 30px;
				line-height: 50px;
			}

			.icon-zanting {
				font-size: 30px;
				line-height: 50px;
			}
		}

		.musiconplay:focus-visible {
			width: 15%;
			height: 100%;
			background-color: red;

			.icon-bofanganniu {
				font-size: 30px;
				line-height: 50px;
			}

			.icon-zanting {
				font-size: 30px;
				line-height: 50px;
			}
		}

		.musiclist {
			width: 12.1%;
			height: 100%;

			.icon-bofangliebiao {
				font-size: 30px;
				line-height: 50px;
				text-align: right;
			}
		}
	}
</style>

这是实现图片绕中心轴无限旋转的样式

只需要给imgage一个类名为appLogo

@keyframes App-logo-spin {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}

		@media (prefers-reduced-motion: no-preference) {
			.appLogo {
				animation: App-logo-spin infinite 20s linear;
			}
		}

iconfont.css


/* 播放 */
@font-face {
  font-family: 'iconfont';  /* Project id 3740373 */
  src: url('https://at.alicdn.com/t/c/font_3740373_y08i9drblu.woff2?t=1667207478681') format('woff2'),
       url('https://at.alicdn.com/t/c/font_3740373_y08i9drblu.woff?t=1667207478681') format('woff'),
       url('https://at.alicdn.com/t/c/font_3740373_y08i9drblu.ttf?t=1667207478681') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bofanganniu:before {
  content: "\e628";
}

/* 暂停 */
@font-face {
  font-family: 'iconfont';  /* Project id 3740382 */
  src: url('https://at.alicdn.com/t/c/font_3740382_mrrswfti5k.woff2?t=1667207599785') format('woff2'),
       url('https://at.alicdn.com/t/c/font_3740382_mrrswfti5k.woff?t=1667207599785') format('woff'),
       url('https://at.alicdn.com/t/c/font_3740382_mrrswfti5k.ttf?t=1667207599785') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-zanting:before {
  content: "\e600";
}
/* 播放列表 */
@font-face {
  font-family: 'iconfont';  /* Project id 3740393 */
  src: url('https://at.alicdn.com/t/c/font_3740393_unr3lgox5gr.woff2?t=1667207714247') format('woff2'),
       url('https://at.alicdn.com/t/c/font_3740393_unr3lgox5gr.woff?t=1667207714247') format('woff'),
       url('https://at.alicdn.com/t/c/font_3740393_unr3lgox5gr.ttf?t=1667207714247') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-bofangliebiao:before {
  content: "\e6a7";
}

一起评论交流，共同进步啊！文章来源地址https://www.toymoban.com/news/detail-614669.html

到了这里，关于uni-app(踩坑第三篇):音频Api之uni.createInnerAudioContext()的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！