uni.createInnerAudioContext()
创建并返回内部 audio 上下文 innerAudioContext 对象
简单实现音频播放,音频图片的旋转与暂停
<template>
<view>
<view class="song">
<view class="song-play margin-top">
<image class="song-play-image song-play-animation" :class="{'song-play-animation-paused': !isPlay}" :src="pageData.img_url"></image>
<image class="song-play-icon" :src="isPlay?playImage:pauseImage" @click="clickPlay"></image>
</view>
</view>
</view>
</template>
<script>
// 创建音频播放器
const innerAudioContext = uni.createInnerAudioContext();
export default {
data() {
return {
pageData: {
img_url: "https://p1.music.126.net/y1dxGN45bYIHSjTcacDpgw==/109951169116559827.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0",
},
// 是否播放标识
isPlay: true,
// 播放/暂停的图标
playImage: '/static/images/play_1649.png',
pauseImage: '/static/images/pause_1649.png',
}
},
onLoad() {
// 初始自动播放音频
innerAudioContext.autoplay = true
// 存入音频路径
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
// 监听错误
this.onError()
},
methods: {
// 点击播放/暂停按钮
clickPlay() {
if(this.isPlay) this.onPause()
else this.onPlay()
},
// 监听播放
onPlay() {
innerAudioContext.play();
innerAudioContext.onPlay((res) => {
this.isPlay = true;
})
},
// 监听暂停
onPause() {
innerAudioContext.pause();
innerAudioContext.onPause((res) => {
this.isPlay = false;
})
},
// 监听错误
onError() {
innerAudioContext.onError((res) => {
this.isPlay = false
});
},
}
}
</script>
<style lang="scss">
.song {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&-play {
position: relative;
&-image {
width: 80vw;
height: 80vw;
border-radius: 1000px;
opacity: .65;
}
&-icon {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
width: 60px;
height: 60px;
opacity: 1;
}
}
}
/* 图片旋转动画 */
@keyframes image-trans {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
.song-play-animation {
animation: image-trans infinite 20s linear;
}
}
/* 音频暂停时,图片暂停旋转 */
.song-play-animation-paused {
animation-play-state: paused;
}
</style>
图片旋转动画
/* 图片旋转动画 */
@keyframes image-trans {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
.song-play-animation {
animation: image-trans infinite 20s linear;
}
}
/* 音频暂停时,图片暂停旋转 */
.song-play-animation-paused {
animation-play-state: paused;
}