前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uniapp播放音频

uniapp播放音频

作者头像
阿超
发布2022-08-17 21:50:58
1.2K0
发布2022-08-17 21:50:58
举报
文章被收录于专栏:快乐阿超快乐阿超

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

播放音频的代码很简单:

代码语言: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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-12-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档