一、安装：
yarn add @liripeng/vue–audio–player 或 npm i -S @liripeng/vue–audio–player
二、全局引入
1.import AudioPlayer from ‘@liripeng/vue–audio–player’
三、使用
</div>
<audio–player :audio–list=”audioList.map(elm => elm)” :before–play=”handleBeforePlay”
theme-color=”red” continuation=”false” />
</div>
<script>
let audioList = ref([‘//downsc.chinaz.net/Files/DownLoad/sound1/201906/11670.mp3′ ])
const handleBeforePlay = (next) => {
next()
}
return {
audioList,
}
},
}
</script>
四、改造
思路：通过css进行隐藏不需要的功能，通过定位改变到想要的位置，新增功能通过定位进行遮罩
-
改造前
-
改造后
-
代码：
<template>
</div>
<audio-player :audio-list=”audioList.map(elm => elm)” :before-play=”handleBeforePlay”
theme-color=”rgb(255,255,255,.1)” continuation=”false” />
</div>
</template>
<script>
let audioList = ref([‘//downsc.chinaz.net/Files/DownLoad/sound1/201906/11670.mp3′])
const handleBeforePlay = (next) => {
next()
}
return {
currentAudioName,
audioList,
handleBeforePlay
}
},
}
</script>
<style>
.aBOx {
width: 95%;
background: white;
}
.audio-tex {
height: 60%;
width: 80%;
left: 20%;
top: 8%;
display: flex;
justify-content: space–around;
}
.audio-tex>span:nth–child(1) {
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow‘, Arial, sans-serif;
}
.audio-tex>span:nth–child(2) {
color: #ccc;
}
.audio-player {
display: flex;
}
}
left: 0px;
top: 20%;
display: flex;
color: yellowgreen !important;
}
left: 0px;
top: 20%;
display: flex;
color: yellowgreen !important;
}
.audio__play-rate {
}
}
.audio__play-next {
display: none !important;
}
.audio__play-volume-icon-wrap {
display: none !important;
}
width: 90% !important;
height: 10px !important;
height: 2px !important;
}
background: yellowgreen !important;
height: 2px;
}
display: none;
}
.audio__time-wrap {
width: 92% !important;
height: 20px !important;
}
</style>
原文地址:https://blog.csdn.net/tree_ge/article/details/129544710
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_9106.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
