mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-08 18:36:47 +08:00
64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<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> |