效果图
文章来源：https://www.toymoban.com/news/detail-519509.html
components
template
<div class='daudio'>
<audio ref="audio" @timeupdate="updateProgress" @ended="end" @loadedmetadata="loadedmetadata" controls
style="display: none" src="../assets/audio/y837.mp3" preload="metadata">
您的浏览器不支持音频播放
</audio>
<div class="audioBox">
<div class="audioInfo">
<h3>2022123434.mp3（3.75KB）</h3>
<p id="time">{{ duration }}/{{ current }}</p>
</div>
<img ref="control" v-if="!isPlay" src="../assets/images/paly.png" alt="" @click="audioPlay(true)"
class="audioControls" />
<img ref="control" v-else src="../assets/images/suspend.png" alt="" @click="audioPlay(false)"
class="audioControls" />
</div>
</div>
javascript
export default {
name: "AudioPlayer",
data() {
return {
audio: null,
contorl: null,
contorlDot: null,
contorlProgress: null,
contorlProgressBox: null,
current: "00:00",
duration: "00:00",
isPlay: false
};
},
props: {
},
created() {},
mounted() {
this.init()
},
methods: {
init() {
this.audio = this.$refs.audio;
this.contorl = this.$refs.contorl;
},
// 时分秒转换
transTime(value) {
let that = this;
var time = "";
var h = parseInt(`${value / 3600}`);
value %= 3600;
var m = parseInt(`${value / 60}`);
var s = parseInt(`${value % 60}`);
if (h > 0) {
time = that.formatTime(h + ":" + m + ":" + s);
} else {
time = that.formatTime(m + ":" + s);
}
return time;
},
// 补零
formatTime(value) {
var time = "";
var s = value.split(":");
var i = 0;
for (; i < s.length - 1; i++) {
time += s[i].length === 1 ? "0" + s[i] : s[i];
time += ":";
}
time += s[i].length === 1 ? "0" + s[i] : s[i];
return time;
},
// 音频播放暂停
audioPlay(status) {
if (status) {
this.audio.play();
} else {
this.audio.pause();
}
this.isPlay = status
},
// 更新进度条与当前播放时间
updateProgress(e) {
this.current = this.transTime(e.target.currentTime);
},
// 音频结束
end(e) {
this.isPlay = false
},
loadedmetadata(e) {
this.duration = this.transTime(e.target.duration);
}
},
//如果页面有keep-alive缓存功能，这个函数会触发
activated() { },
};
</script>
less
.audioBox {
padding: 8px 16px;
background: #eaebed;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
width: 311px;
height: 54px;
box-sizing: border-box;
}
.audioControls {
width: 22px;
height: 22px;
}
.audioInfo {
h3 {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0.2px;
text-align: justify;
font-weight: 400;
margin-bottom: 4px;
}
p {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #999999;
letter-spacing: 0.17px;
text-align: justify;
font-weight: 400;
}
}
引入
import AudioPlayer from "../../components/AudioPlayer.vue";
components: { AudioPlayer },
<AudioPlayer fileUrl="../assets/audio/y837.mp3"></AudioPlayer>
文档参考
关于 Audio 自定义样式
H5 audio 音频标签自定义样式修改以及添加播放控制事件文章来源地址https://www.toymoban.com/news/detail-519509.html
到了这里，关于Vue实现自定义音频播放器组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
