<template>
<view class="u-demo">
<view class="header">
<view class="header1">
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
<view class="right">
微信<br>分享
</view>
</view>
<view class="content1">《辅导费》第111集：啛啛喳喳错啛啛喳喳错</view>
<view class="end1">
<view class="top">
<u-icon name="skip-back-left"></u-icon>
<view class="audio-number">{{format(percent)}}</view>
<view class="audio-slider">
<slider block-size="12" activeColor="#000000"
:value="percent" format-tooltip="formatTooltip" show-value="true" :max="duration" min="0" ref="audio" @canplay="getDuration"
backgroundColor="#169AF3" @changing="seek=true,percent=$event.detail.value" @change="innerAudioContext.seek($event.detail.value)"></slider>
</view>
<!-- <u-line-progress active-color="#2979ff" :percent="percent"
@change="seek" :show-percent="false" :round="false" height="30"></u-line-progress> -->
<view class="audio-number">{{format(duration)}}</view>
<u-icon name="skip-forward-right"></u-icon>
</view>
<view class="bottom">
<u-icon @tap="backmusic" name="rewind-left-fill" size="40"></u-icon>
<u-icon @tap="music" name="pause-circle-fill"class="pause-circle-fill"
size="80" v-show="!ifplay"></u-icon><!-- 播放隐藏 -->
<u-icon @tap="music" name="play-circle-fill" class="play-circle-fill"
size="80" v-show="ifplay"></u-icon>
<u-icon @tap="nextmusic" name="rewind-right-fill" size="40"></u-icon>
</view>
</view>
</view>
<view class="fgt">
<u-gap height="25" bg-color="#bbb"></u-gap>
</view>
<view class="content">
<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
<view class="left">
<view class="p1">专辑的名字</view>
<view class="p2">播放量 集数</view>
</view>
<view class="right2">
订阅
</view>
</view>
<view class="fgt1">
<u-gap height="25" bg-color="#bbb"></u-gap>
</view>
<view class="end">
<view class="endtop">
<!-- <u-tabs ref="tabs" bar-height="6" bar-width="40"
active-color="#2979ff" name="cate_name"
count="cate_count" :list="list"
@change="change" :is-scroll="isScroll" :offset="offset"></u-tabs> -->
<!-- <u-subsection :current="sectionCurrent" :list="['详情', '评论']" @change="modeChange"
class="sub"></u-subsection> -->
<view class="leftxq">详情
<view class="lant"></view>
</view>
<view class="rightpl">评论
<view class="lant1"></view>
</view>
</view>
<view class="xq">
<view class="xqtou1">演播人介绍</view>
<view class="xqcontent">
<!-- <view class="xqright">
头像
</view> -->
<view class="xqava"><u-avatar></u-avatar></view>
<view class="xqleft">
<view class="xqp1">演播人名字</view>
<view class="xqp2">关注量111万</view>
</view>
<view class="xqright2">
<u-icon name="man-add-fill" size="80"></u-icon>
<view class="xqwz">加关注</view>
</view>
</view>
</view>
<view class="fgt2">
<u-gap height="25" bg-color="#bbb"></u-gap>
</view>
<view class="pl">
<view class="pltou">
<view class="pltou1">1000条评论</view>
<view class="pltou2">写评论</view>
</view>
<view class="plcontent">
<!-- <view class="xqright">
头像
</view> -->
<view class="plava"><u-avatar></u-avatar></view>
<view class="plleft">
<view class="plp1">昵称清清</view>
<view class="plp2">日期</view>
<view class="plp3">评论内容</view>
</view>
<view class="plright2">
<view class="plwz">111</view>
<u-icon name="thumb-up" size="50"></u-icon>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cur:0,
list:
[
"https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
"http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_149779982&response=res&type=convert_url&",
"http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_52513725&response=res&type=convert_url&",
"music4",
"music5"
],
innerAudioContext: uni.createInnerAudioContext(),
ifplay:true,
//startTime:0,
percent:0,
duration:30,
currentTime:0,
continue:true,
seek:false,
//value:0,
paused: true, //是否处于暂停状态
loading: false, //是否处于读取状态
}
},
computed: {},
methods: {
// 控制音乐
music(){
this.ifplay = !this.ifplay;
if(this.ifplay){
this.pausemusic()
}else{
this.playmusic()
}
},
//格式化时长
format(num) {
return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(Math.floor(num % 60)).length) + Math.floor(num % 60)
},
playmusic() {
if(this.cur/1==this.cur){
const that = this;
this.innerAudioContext.src =this.list[this.cur]
this.innerAudioContext.play()
this.innerAudioContext.onPlay(() => {
console.log(
'开始播放');
})
this.innerAudioContext.onTimeUpdate(() => {
this.percent= this.innerAudioContext.currentTime
this.duration = this.innerAudioContext.duration
this.innerAudioContext.startTime= this.percent
console.log(1122);
})//暂停后有值
if (mMgr.src == this.properties.mMgrSrc) {
mMgr.play()
} else {
mMgr.src = this.properties.mMgrSrc
mMgr.title = this.properties.title
}
this.innerAudioContext.onEnded(() => {
this.nextmusic()
})
}
},
pausemusic(){
const that = this;
this.innerAudioContext.onPause(() => {
console.log(
'暂停播放');
})
this.innerAudioContext.onTimeUpdate(() => {
this.innerAudioContext.startTime= this.percent
//this.duration = this.alltime
console.log(123);
})
this.innerAudioContext.pause()
//this.innerAudioContext.src =this.list[this.cur]
},
nextmusic(){
this.cur=this.cur +1
this.innerAudioContext.pause()
this.innerAudioContext.src = this.list[this.cur]
this.innerAudioContext.play()
if(this.ifplay){
this.ifplay = !this.ifplay}else{}
},
backmusic(){
this.cur=this.cur -1
this.innerAudioContext.pause()
this.innerAudioContext.src = this.list[this.cur]
this.innerAudioContext.play()
if(this.ifplay){
this.ifplay = !this.ifplay}else{}
},
/* time(){
console.log(3344);
var alltime=parseInt(duration);
var nowtime=parseInt(percent);
console.log(alltime);
}, */
},
/* formatTooltip(value){
Math.floor(this.value);
value +'s'
}, */
created(){
const that = this;
setTimeout(()=>{
this.innerAudioContext.src =this.list[this.cur]
this.duration = this.innerAudioContext.duration
})
if (this.src) {
this.innerAudioContext.src = this.src
this.playmusic()
}
this.innerAudioContext.obeyMuteSwitch = false
//音频进度更新事件
this.innerAudioContext.onTimeUpdate(() => {
if (!this.seek) {
this.percent = this.innerAudioContext.currentTime
}
if (!this.duration) {
this.duration = this.innerAudioContext.duration
}
})
//音频完成更改进度事件
this.innerAudioContext.onSeeked(() => {
this.seek = false
})
this.innerAudioContext.onEnded(() => {
this.nextmusic()
})
},
/* beforeDestroy(){
this.innerAudioContext.destroy()
}, */
watch: {
src(src, old) {
this.innerAudioContext.src = src
this.percent = 0
this.duration = 30
if (old) {
this.play()
}
},
}
}
</script>
<style lang="scss">
/* .u-demo{
display: flex;
align-items: center;
flex-direction:column ;
}
/* .aud{
border: 1rpx solid #000000;
width: 200rpx;
height: 200rpx;
} */
.audio-slider{
width: 100%;
height: 30rpx;
margin-top: -50rpx;
touch-action: none;
}
.leftxq,.rightpl{
display: flex;
flex-direction: column;
align-items: center;
}
.lant,.lant1{
width: 50rpx;
height: 10rpx;
margin-top: 10rpx;
background-color: #2979FF;
}
.sub{
border: 1rpx solid #000000;
}
.header{
display: flex;
flex-direction: column;
align-items: center;
}
.header1{
/* border: 1rpx solid #000000; */
width: 100%;
height: 370rpx;
display: flex;
}
.header1 image {
width: 350rpx;
height: 350rpx;
margin-left: 20%;
/* flex: 0 0 120rpx; */
}
.right,.xqright{
border: 1rpx solid #000000;
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
text-align: center;
padding-top: 10rpx;
margin-left: 10%;
}
.content1{
/* border: 1rpx solid #82848A; */
text-align: center;
width: 80%;
margin-top: 20rpx;
font-size: 40rpx;
font-weight: bold;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
}
.content{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 170rpx;
margin: 20rpx 0 20rpx;
}
.content image{
width: 150rpx;
height: 100%;
margin-left: -20rpx;
}
.left{
width: 50%;
height: 100%;
padding-top:20rpx ;
line-height: 50rpx;
}
.right2{
border: 1rpx solid #bbb;
border-radius: 20rpx;
height: 50rpx;
line-height: 50rpx;
width: 100rpx;
text-align: center;
background-color: red;
color: #FFFFFF;
}
.end1{
width: 100%;
margin-top: 30rpx;
}
.top{
margin-top: 20rpx;
}
.top,.bottom{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
.bottom{
margin: 50rpx 0 20rpx;
height: 100rpx;
.play-circle-fill,.pause-circle-fill{
display: flex;
height: 100%;
}
}
.fgt,.fgt1,.fgt2{
height: 25rpx;width: 740rpx;
margin-left: -40rpx;
}
.fgt{
margin-top: 20rpx;
}
.end{
/* display: flex;
flex-direction: column; */
width: 100%;
height: 900rpx;
}
.endtop{
display: flex;
justify-content: space-around;
margin-top: 20rpx;
}
.xq{
display: flex;
flex-direction: column;
/* border: 1rpx solid blue; */
width: 100%;
height: 250rpx;
}
.pl{
display: flex;
flex-direction: column;
/* border: 1rpx solid blue; */
width: 100%;
height: 300rpx;
margin-top: 30rpx;
}
.xq{
margin-top: 60rpx;
}
.xqcontent,.plcontent{
display: flex;
/* justify-content: space-between; */
align-items: center;
/* border: 1rpx solid #000000; */
display: flex;
margin: 10rpx 0 0;
width: 100%;
height: 100%;
}
.xqleft,.plleft{
margin-left: 30rpx;
line-height: 45rpx;
}
.xqright2{
margin-left: 250rpx;
}
.plright2{
display: flex;
flex-direction: center;
align-items: center;
margin-left: 300rpx;
display: flex;
}
.plwz{
margin: 15rpx 10rpx 0;
}
.pltou{
display: flex;
justify-content: space-between;
align-items: center;
}
.pltou2{
background-color:#FFFFFF;
color: #000000;
width: 150rpx;
border: 1rpx solid #bbb;
border-radius: 20rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
}
.xqtou1,.pltou1{
font-size: 40rpx;
font-weight: bold;
}
.plava{
}
.plp3{
margin-top: 15rpx;
}
</style>
