uniapp播放音频

人们不太看重自己的力量——这就是他们软弱的原因。——高尔基

播放音频的代码很简单：

代码语言：javascript复制

const innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.src = 'https://waibi.oss-cn-chengdu.aliyuncs.com/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav';
		innerAudioContext.play();

官方文档：

https://uniapp.dcloud.io/api/media/audio-context

除了播放、暂停、停止等也都能实现

完整代码：

代码语言：javascript复制

<template>
	<view class="content">
		<image :class="{ widther: play }" class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		<navigator :class="{ widther: play }" url="/pages-user/list">user-list</navigator>
		<navigator :class="{ widther: play }" url="/pages-news/list">news-list</navigator>
		<view>{{ val }}</view>

		<view @tap="parentEvent"><view @tap.stop="childEvent">触发触发</view></view>
		<view @tap="parentEvent"><view @touchend="childEvent">触发触发</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			play: false,
			val: 0
		};
	},
	onLoad() {
		const innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.src = 'https://waibi.oss-cn-chengdu.aliyuncs.com/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav';
		innerAudioContext.play();
		setTimeout(() => (this.play = true), 1000);
		uni.$on('add', this.add);
	},
	methods: {
		add(e) {
			console.log('主页的add被触发了！: ', e);
			this.val  = e.data;
		},
		parentEvent(e) {
			console.log('parentEvent');
		},
		childEvent(e) {
			console.log('childEvent');
			e.stopPropagation();
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 0;
	width: 0;
	/* #ifndef APP-PLUS-NVUE */
	transition: all 1s;
	/* #endif */
	/* #ifdef APP-PLUS-NVUE */
	transition: width, height 1s;
	/* #endif */
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
.widther {
	width: 200rpx;
	height: 200rpx;
}
</style>

官方文档 音频

0 人点赞