<template>
	<view>
		<view>
			<audio-player 
				v-if="url2"
				:src="url2" 
				:name="title" 
				:drag="true"
				@onPlay="audioPlay"
				@onPause="audioPause"
				@onPlaying="audioPlaying"
				@onEnded="audioEnd">
			</audio-player>
		</view>
		<view style="padding-top: 30px;display: flex;justify-content: center;">
			<button type="primary" @click="changeSrc">切换测试</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				url2:'',
				title:'',
				author:'',
			}
		},
		mounted() {
			this.startAudioPlay();
		},
		methods:{
			startAudioPlay(){
				this.url2='http://localhost:9090/cdn/upload/course/2022/5/979321410778959872.mp3';
				this.title='标题内容111';
				this.author='作者信息';
			},
			changeSrc(){
				this.url2='http://localhost:9090/cdn/upload/course/2022/4/964853684964700160.mp3';
				this.title='标题内容22';
				this.author='作者信息';
			},
			audioPlay(){
				console.log('audioPlay');
			},
			audioEnd(){
				console.log('audioEnd');
			},
			audioPause(){
				console.log('audioPause');
			},
			audioPlaying(){
				console.log('audioPlaying');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xaudio{
		
	}
</style>