admin管理员组文章数量:1586209
uni.createInnerAudioContext()
创建并返回内部 audio 上下文 innerAudioContext 对象。
最近在写一个仿网易云的项目，使用uni.createInnerAudioContext()封装了一个音频组件
#myaudio.vue
主要实现了图片旋转以及音乐的播放和暂停
有没有大佬指教一番的让我涨涨知识
<template>
<view class="myaudio">
<!-- 歌曲海报 -->
<view class="musicimage" @click="changetomusic">
<image class="appLogo"
src="https://img2.baidu/it/u=3181851593,3353679262&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=292"
mode=""></image>
</view>
<!-- 歌曲名称-->
<view class="musictext" @click="changetomusic">
{{text}}
</view>
<!-- 播放按钮 -->
<view class="musiconplay">
<view class="iconfont icon-bofanganniu" v-if=" iconshow ? false:true" @click="changeto">
</view>
<view class="iconfont icon-zanting" v-if=" iconshow ? true:false" @click="changeto">
</view>
</view>
<!-- 列表按钮 -->
<view class="musiclist">
<view class="iconfont icon-bofangliebiao">
<!-- v-if=" iconshow ? true:false" @click="changeto" -->
</view>
</view>
</view>
</template>
<script>
const innerAudioContext = uni.createInnerAudioContext() //想要实现暂停功能就要把该对象变为全局属性
export default {
name: 'myaudio',
data() {
return {
iconshow: false,
text: '红玫瑰 - 陈奕迅',
url: "https://dl.stream.qqmusic.qq/C400003LnSNo1ecdc3.m4a?guid=358840384&vkey=4998179E3E27FCEC1CADA69ACE26BA5DF979E8F05291153DC32F77C7C50C3213C5668EA838E705063B448C983A777DD574E945B3FBECA0D0&uin=&fromtag=120032",
currenttime: 0
}
},
methods: {
changeto() {
this.iconshow = !this.iconshow
console.log(this.iconshow);
if (this.iconshow) {
innerAudioContext.src = this.url;
innerAudioContext.seek(this.currenttime)
innerAudioContext.volume = 0.5
innerAudioContext.play()
} else {
innerAudioContext.pause()
this.currenttime = innerAudioContext.currentTime
}
},
changetomusic() {
uni.navigateTo({
url: "/pages/bofang/bofang"
})
},
}
}
</script>
<style lang="scss">
@import url("../../static/iconfont/iconfont.css");
// https://img2.baidu/it/u=3181851593,3353679262&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=292
.myaudio {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
.musicimage {
width: 15%;
padding: 0;
margin: 0;
height: 100%;
background-color: black;
border-radius: 50%;
.appLogo {
position: relative;
top: 7px;
left: 7px;
width: 70%;
height: 70%;
border-radius: 50%;
}
}
.musictext {
width: 55%;
height: 100%;
padding-left: 10px;
font-size: 15px;
line-height: 50px;
text-align: left;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
.appLogo {
animation: App-logo-spin infinite 20s linear;
}
}
.musiconplay {
width: 15%;
height: 100%;
.icon-bofanganniu {
cursor: pointer;
font-size: 30px;
line-height: 50px;
}
.icon-zanting {
font-size: 30px;
line-height: 50px;
}
}
.musiconplay:focus-visible {
width: 15%;
height: 100%;
background-color: red;
.icon-bofanganniu {
font-size: 30px;
line-height: 50px;
}
.icon-zanting {
font-size: 30px;
line-height: 50px;
}
}
.musiclist {
width: 12.1%;
height: 100%;
.icon-bofangliebiao {
font-size: 30px;
line-height: 50px;
text-align: right;
}
}
}
</style>
这是实现图片绕中心轴无限旋转的样式
只需要给imgage一个类名为appLogo
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
.appLogo {
animation: App-logo-spin infinite 20s linear;
}
}iconfont.css
/* 播放 */
@font-face {
font-family: 'iconfont'; /* Project id 3740373 */
src: url('https://at.alicdn/t/c/font_3740373_y08i9drblu.woff2?t=1667207478681') format('woff2'),
url('https://at.alicdn/t/c/font_3740373_y08i9drblu.woff?t=1667207478681') format('woff'),
url('https://at.alicdn/t/c/font_3740373_y08i9drblu.ttf?t=1667207478681') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bofanganniu:before {
content: "\e628";
}
/* 暂停 */
@font-face {
font-family: 'iconfont'; /* Project id 3740382 */
src: url('https://at.alicdn/t/c/font_3740382_mrrswfti5k.woff2?t=1667207599785') format('woff2'),
url('https://at.alicdn/t/c/font_3740382_mrrswfti5k.woff?t=1667207599785') format('woff'),
url('https://at.alicdn/t/c/font_3740382_mrrswfti5k.ttf?t=1667207599785') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-zanting:before {
content: "\e600";
}
/* 播放列表 */
@font-face {
font-family: 'iconfont'; /* Project id 3740393 */
src: url('https://at.alicdn/t/c/font_3740393_unr3lgox5gr.woff2?t=1667207714247') format('woff2'),
url('https://at.alicdn/t/c/font_3740393_unr3lgox5gr.woff?t=1667207714247') format('woff'),
url('https://at.alicdn/t/c/font_3740393_unr3lgox5gr.ttf?t=1667207714247') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bofangliebiao:before {
content: "\e6a7";
}
一起评论交流，共同进步啊！
版权声明：本文标题：uni-app(踩坑第三篇):音频Api之uni.createInnerAudioContext() 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1727976879a1140755.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论