<div?class="audio-play-box">
??????<div?class="audio-play-box-main?clearfix">
????????<span?class="s-btn-close"?>關(guān)閉</span>
????????<div?class="s-area-handle?fl">
??????????<span?class="prevBtn"?></span>
??????????<span?class="playBtn"?@click="playAudio"?v-if="!isPlaying"></span>
??????????<span?class="stopBtn"?@click="stop"?v-if="isPlaying"></span>
??????????<span?class="nextBtn"?></span>
????????</div>
????????<div?class="audio_box?clearfix?fl">
??????????<audio
????????????ref="audio"
????????????:src="audioPathS.path"
????????????@timeupdate="updateTime"
????????????@canplay="getDuration"
????????????controls
????????????style="display:none;"
??????????></audio>
??????????<div?class="s-box-slider?fl">
????????????<el-slider
??????????????id="el-slider"
??????????????:show-tooltip="false"
??????????????v-model="playProgress"
??????????????@change="progressChange"
????????????>
????????????</el-slider>
??????????</div>
??????????<div?class="s-box-times?fl">
????????????<span?class="s-now"?id="audio-time-now">{{currentTime}}</span>
????????????<span>/</span>
????????????<span?class="s-all"?id="audio-time-end">{{totalTime}}</span>
??????????</div>
????????</div>
????????<div?class="playbackRate?fr"?>
??????????<span>3x</span>
????????</div>
??????</div>
????</div>
//?音頻參數(shù)
??????isPlaying:false,//播放狀態(tài)
??????totalLength:?"",//音頻總長度
??????currentLength:?"",//當(dāng)前播放時(shí)間
??????playProgress:?0,//滑塊位置
computed:{
????currentTime?()?{
??????let?time?=?'00:00'
??????if?(this.currentLength)?{
????????time?=?this.transTime(this.currentLength)
??????}
??????return?time
????},
????totalTime?()?{
??????let?time?=?'00:00'
??????if?(this.totalLength)?{
????????time?=?this.transTime(this.totalLength)
??????}
??????return?time
????},
??},
?//?點(diǎn)擊播放按鈕
????playAudio()?{
??????this.audioPathS?=?this.detail.GROUP_ITEMS[0];
??????let?s?=?this.$refs.audio.duration;?//獲取視頻的總時(shí)長
??????this.totalLength?=?s
??????this.$nextTick(()=>{
????????this.isPlaying?=?true;
????????this.$refs.audio.play();
??????})
????},
????//?暫停
????stop()?{
??????this.isPlaying?=?false;
??????this.$refs.audio.pause();
????},
????//?拖動進(jìn)度條事件
????progressChange(value)?{
??????let?current?=?(value?/?100)?*?this.totalLength;
??????this.$refs.audio.currentTime?=?current;
????},
????//?獲取音頻時(shí)長
????getDuration?()?{
??????this.totalLength?=?this.$refs.audio.duration
????},
????//?獲取當(dāng)前播放進(jìn)度
????updateTime(e)?{
???????this.currentLength?=?e.target.currentTime?//?獲取audio當(dāng)前播放時(shí)間
??????if?(this.totalLength)?{
????????this.playProgress?=?(this.currentLength?/?this.totalLength)?*?100
??????}
??????if?(this.currentLength?===?this.totalLength)?{
????????this.isPlaying?=?false
??????}
????},
????//?將時(shí)間轉(zhuǎn)化成?mm:ss?格式
????transTime?(time)?{
??????var?duration?=?parseInt(time)
??????var?minute?=?parseInt(duration?/?60)
??????var?sec?=?duration?%?60?+?''
??????var?isM0?=?':'
??????if?(minute?===?0)?{
????????minute?=?'00'
??????}?else?if?(minute?<?10)?{
????????minute?=?'0'?+?minute
??????}
??????if?(sec.length?===?1)?{
????????sec?=?'0'?+?sec
??????}
??????return?minute?+?isM0?+?sec
????}
<style?lang="scss"?scoped>
.audio-play-box?{
??position:?fixed;
??bottom:?0px;
??left:?0;
??width:?100%;
??min-width:?1200px;
??height:?56px;
??background:?rgba(0,?0,?0,?0.8);
??z-index:?9999;
??padding:?0?40px;
??/*?line-height:?56px;?*/
}
.audio-play-box?.audio-play-box-main?{
??width:?1200px;
??margin:?0?auto;
??position:?relative;
}
.audio-play-box?.audio-play-box-main?.s-btn-close?{
??position:?absolute;
??right:?0;
??top:?-26px;
??color:?#fff;
??width:?74px;
??text-align:?center;
??cursor:?pointer;
}
.audio-play-box?.audio-play-box-main?.s-btn-close:after?{
??content:?"";
??position:?absolute;
??top:?0;
??left:?0;
??border-bottom:?26px?solid?rgba(0,?0,?0,?0.8);
??border-left:?10px?solid?transparent;
??border-right:?10px?solid?transparent;
??width:?54px;
??z-index:?-1;
}
.audio-play-box?.s-area-handle?{
??width:?116px;
??float:?left;
??font-size:?0;
??line-height:?56px;
}
.audio-play-box?.s-area-handle?span?{
??display:?inline-block;
??/*?margin:?0?5px;?*/
??margin-right:?14px;
??vertical-align:?middle;
??cursor:?pointer;
}
.audio-play-box?.s-area-handle?span.prevBtn?{
??background:?url("../../../../static/images/player_button_previous_track@2x.png")
????no-repeat?left?center;
??background-size:?24px;
??padding-left:?24px;
??width:?24px;
??height:?24px;
}
.audio-play-box?.s-area-handle?span.playBtn?{
??background:?url("../../../../static/images/player_button_play@2x.png")
????no-repeat?left?center;
??background-size:?40px;
??padding-left:?40px;
??width:?40px;
??height:?40px;
}
.audio-play-box?.s-area-handle?span.stopBtn?{
??background:?url("../../../../static/images/playBtn.png")?no-repeat?left?center;
??background-size:?40px;
}
.audio-play-box?.s-area-handle?span.nextBtn?{
??background:?url("../../../../static/images/player_button_next_track@2x.png")
????no-repeat?left?center;
??background-size:?24px;
??padding-left:?24px;
??width:?24px;
??height:?24px;
??margin-right:?0;
}
.audio-play-box?.audio_box?{
??float:?left;
??/*?height:?56px;?*/
??/*?line-height:?56px;?*/
??/*?width:?calc(?100%?-?80px?-?130px?-?100px);?*/
??/*?width:?1050px;?*/
??/*?overflow:?hidden;?*/
??padding:?18px?0?0?40px;
}
.audio-play-box?.audio_box?.s-box-slider?{
??width:?800px;
}
.audio-play-box?.audio_box?.s-box-slider?.el-slider__runway?{
??background-color:?#474747;
??height:?10px;
??border-radius:?5px;
??margin:?13px?0;
}
.audio-play-box?.audio_box?.s-box-slider?.el-slider__bar?{
??height:?10px;
??background-color:?#4a69bd;
??border-top-left-radius:?5px;
??border-bottom-left-radius:?5px;
}
.audio-play-box?.audio_box?.s-box-slider?.el-slider__button-wrapper?{
??top:?-13px;
}
.audio-play-box?.audio_box?.s-box-slider?.el-slider__button?{
??border:?3px?solid?#fff;
??background-color:?#4a69bd;
}
.audio-play-box?.audio_box?.s-box-times?{
??margin:?6px?0?0?15px;
??color:?#fff;
}
.audio-play-box?.playbackRate?{
??line-height:?56px;
}
.playbackRate?span?{
??display:?inline-block;
??vertical-align:?middle;
??width:?34px;
??border-radius:?100%;
??border:?2px?solid?#fff;
??height:?34px;
??text-align:?center;
??line-height:?31px;
??color:?#fff;
??cursor:?pointer;
}
</style>
