uni.createInnerAudioContext()
創(chuàng)建并返回內(nèi)部 audio 上下文?innerAudioContext?對(duì)象。
最近在寫一個(gè)仿網(wǎng)易云的項(xiàng)目，使用uni.createInnerAudioContext()封裝了一個(gè)音頻組件
#myaudio.vue
主要實(shí)現(xiàn)了圖片旋轉(zhuǎn)以及音樂的播放和暫停
有沒有大佬指教一番的讓我漲漲知識(shí)
<template>
<view class="myaudio">
<!-- 歌曲海報(bào) -->
<view class="musicimage" @click="changetomusic">
<image class="appLogo"
src="https://img2.baidu.com/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() //想要實(shí)現(xiàn)暫停功能就要把該對(duì)象變?yōu)槿謱傩? export default {
name: 'myaudio',
data() {
return {
iconshow: false,
text: '紅玫瑰 - 陳奕迅',
url: "https://dl.stream.qqmusic.qq.com/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.com/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>
這是實(shí)現(xiàn)圖片繞中心軸無限旋轉(zhuǎn)的樣式
只需要給imgage一個(gè)類名為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文章來源：http://www.zghlxwxcb.cn/news/detail-614669.html
/* 播放 */
@font-face {
font-family: 'iconfont'; /* Project id 3740373 */
src: url('https://at.alicdn.com/t/c/font_3740373_y08i9drblu.woff2?t=1667207478681') format('woff2'),
url('https://at.alicdn.com/t/c/font_3740373_y08i9drblu.woff?t=1667207478681') format('woff'),
url('https://at.alicdn.com/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.com/t/c/font_3740382_mrrswfti5k.woff2?t=1667207599785') format('woff2'),
url('https://at.alicdn.com/t/c/font_3740382_mrrswfti5k.woff?t=1667207599785') format('woff'),
url('https://at.alicdn.com/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.com/t/c/font_3740393_unr3lgox5gr.woff2?t=1667207714247') format('woff2'),
url('https://at.alicdn.com/t/c/font_3740393_unr3lgox5gr.woff?t=1667207714247') format('woff'),
url('https://at.alicdn.com/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";
}
一起評(píng)論交流，共同進(jìn)步?。?/strong>文章來源地址http://www.zghlxwxcb.cn/news/detail-614669.html
到了這里，關(guān)于uni-app(踩坑第三篇):音頻Api之uni.createInnerAudioContext()的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
