音频自定义样式
<div class="audio-play-box">
<div class="audio-play-box-main clearfix">
<span class="s-btn-close" >关闭</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>
// 音频参数
isPlaying:false,//播放状态
totalLength: "",//音频总长度
currentLength: "",//当前播放时间
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
},
},
// 点击播放按钮
playAudio() {
this.audioPathS = this.detail.GROUP_ITEMS[0];
let s = this.$refs.audio.duration; //获取视频的总时长
this.totalLength = s
this.$nextTick(()=>{
this.isPlaying = true;
this.$refs.audio.play();
})
},
// 暂停
stop() {
this.isPlaying = false;
this.$refs.audio.pause();
},
// 拖动进度条事件
progressChange(value) {
let current = (value / 100) * this.totalLength;
this.$refs.audio.currentTime = current;
},
// 获取音频时长
getDuration () {
this.totalLength = this.$refs.audio.duration
},
// 获取当前播放进度
updateTime(e) {
this.currentLength = e.target.currentTime // 获取audio当前播放时间
if (this.totalLength) {
this.playProgress = (this.currentLength / this.totalLength) * 100
}
if (this.currentLength === this.totalLength) {
this.isPlaying = false
}
},
// 将时间转化成 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>
