1. 因为做的小程序需要视频讲解 默认展示播放按钮,当点击播放的时候 显示暂停音乐这样的一个效果。
<view @click="onPlayMusic">
<view class="play-music" v-if="isPlaying">
播放音乐 <u-icon name="play-right"></u-icon>
</view>
<view class="play-music" v-else>
暂停音乐 <u-icon name="pause"></u-icon>
</view>
</view>
写了一个简单的点击事件
<script>
const http = uni.$u.http
export default {
data() {
return {
isPlaying: true, //展示音频
MusicUrl: 'https://static.yzb10086.com/lysst/audio/ee3958d2c59c43c5af2d67096087ad9a_68282.mp3', //播放的链接
}
},
methods: {
//播放音乐
onPlayMusic() {
if (!this.innerAudioContext) {
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.src = this.MusicUrl;
}
if (this.isPlaying) {
this.innerAudioContext.pause(); // 暂停音乐
} else {
this.innerAudioContext.play(); // 播放音乐
}
// 切换音乐播放状态
this.isPlaying = !this.isPlaying;
// 监听音乐播放结束事件,用于在音乐播放结束时更新播放状态和按钮显示
this.innerAudioContext.onEnded(() => {
this.isPlaying = false;
});
}
}
}
</script>
<view class="goods-item">
<view class="goods-item-music" v-for="(item,index) in MusicData" :key="index" @click="CheckMusicPlay(item.url)">
{{item.title}}
</view>
</view>
<script>
export default{
data{
return{
MusicData: [{
title: '狮子王',
url: 'https://static.yzb10086.com/lysst/audio/04eb1225cea84fb0b8e147b2d6b42cae_108563_47896.mp3'
},
{
title: '翠屏母',
url: 'https://static.yzb10086.com/lysst/audio/04eb1225cea84fb0b8e147b2d6b42cae_108581_47895.mp3'
},
{
title: '仙女散花',
url: 'https://static.yzb10086.com/lysst/audio/cad54c3d16ee4a7baf749908cda95825_70678_47699.mp3'
},
{
title: '万年古榕',
url: 'https://static.yzb10086.com/lysst/audio/cad54c3d16ee4a7baf749908cda95825_47039_47698.mp3'
}
]
}
},
methods:{
/**
* 多首曲目可以进行切换自如的播放
*/
CheckMusicPlay(newsUrl) {
if (this.innerAudioContext && this.innerAudioContext.src === newsUrl) {
// 当前是是否暂停或停止状态,true 表示暂停或停止,false 表示正在播放
if (!this.innerAudioContext.paused) {
this.innerAudioContext.pause(); // 暂停当前音频
} else {
this.innerAudioContext.play(); // 继续播放当前音频
}
} else {
if (this.innerAudioContext) {
this.innerAudioContext.stop(); // 停止当前音频
this.innerAudioContext = null;
}
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.src = newsUrl;
this.innerAudioContext.play(); // 播放新音频
}
}
}
}
</script>