uniapp 点击播放音乐（音频）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 点击播放音乐（音频）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp通过uni.createInnerAudioContext()获取音频的信息

通过innerAudioContext.autoplay = true; //自动播放；

通过innerAudioContext.loop=true; //循环播放；

通过innerAudioContext.src=”音乐地址“

play()播放和pause()暂停

// 定义变量
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.loop=true; //循环播放
innerAudioContext.src ='https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';

// 调用方法
bjMusicClick:function(){
	if(this.musicShow){
	console.log('播放')
	const timout =  setTimeout(() => {
		learTimeout(timout)
		innerAudioContext.play()
	},500)
	}else{
		console.log('暂停')
		innerAudioContext.pause();
		}
	this.musicShow=!this.musicShow;
}

使用play() 播放方法时，加入定时器，可以变得相对于稳定的使用。

完整代码如下：

<template>
	<view>
		<view class="audio border-left flex-row">
			<u-icon v-if="musicShow" name="play-circle-fill" size="30" color="#805b93" @click="bjMusicClick"></u-icon>
			<u-icon v-else name="pause-circle-fill" size="30" color="#805b93" @click="bjMusicClick"></u-icon>
			<text class="margin-left">{{duration}}"</text>
		</view>
	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true; //自动播放
	innerAudioContext.loop=true; //循环播放
	innerAudioContext.src ='https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'; //音频地址
	export default {
	    data() {
	       return {
				duration:21,
				musicShow:true
		   }
	    },
	     onLoad(){
	        this.musicShow=false;
	    },
	    methods: {
			bjMusicClick:function(){
				if(this.musicShow){
					console.log('播放')
					const timout =  setTimeout(() => {
						clearTimeout(timout)
						innerAudioContext.play()
					},500)
				}else{
					console.log('暂停')
					innerAudioContext.pause();
				}
				this.musicShow=!this.musicShow;
			}
	    }   
	}
</script>


<style lang="scss" scoped>
.audio{
	width: 150rpx;
	height: 60rpx;
	background: rgba(0, 0, 0, 0.2);
	
	text{
		color: #fff;
	}
}
</style>

最终的实现效果

uniapp音频播放,uni-app,数学建模