vue+element ui 플레이어 기능 구현 인 스 턴 스 코드
1.audio 를 기반 으로 element UI 의 진행 바 와 결합 하여 구현
2.플레이어 의 기본 기능,재생/일시 정지,속 진,음소 거,소리 크기 조절,다운로드 등 기능 을 실현
html 코드,관건 부분 주석 추가
<div class="right di main-wrap" v-loading="audio.waiting">
<!-- ref , vue this.$refs.audio dom -->
<audio ref="audio" class="dn"
:src="url" :preload="audio.preload"
@play="onPlay"
@error="onError"
@waiting="onWaiting"
@pause="onPause"
@timeupdate="onTimeupdate"
@loadedmetadata="onLoadedmetadata"
></audio>
<div class="w-full">
<div class="flex items-center w-10/12 mx-auto">
<!-- -->
<el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>
<!-- -->
<el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider_time"></el-slider>
<!-- -->
<el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
</div>
<div class="mt-3 flex items-center w-1/2 mx-auto justify-around">
<!-- / -->
<el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>
<!-- -->
<el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{audio.speed | transSpeed}}</el-button>
<!-- -->
<el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{audio.muted | transMutedOrNot}}</el-button>
<!-- -->
<div class="flex items-center">
<span class="mr-2 text-sm"> </span>
<el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" @change="changeVolume" class="slider_voice"></el-slider>
</div>
<!-- -->
<a :href="url" rel="external nofollow" v-show="!controlList.noDownload" target="_blank" class="download text-sm" download> </a>
</div>
</div>
</div>
js 코드
<script>
// : :
function realFormatSecond(second) {
var secondType = typeof second
if (secondType === 'number' || secondType === 'string') {
second = parseInt(second)
var hours = Math.floor(second / 3600)
second = second - hours * 3600
var mimute = Math.floor(second / 60)
second = second - mimute * 60
return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
} else {
return '0:00:00'
}
}
export default {
name: 'voicetotext',
props: {
theSpeeds: {
type: Array,
default () {
return [1, 1.5, 2]
}
},
theControlList: {
type: String,
default: ''
}
},
data(){
return{
url: 'https://wdd.js.org/element-audio/static/falling-star.mp3',
audio: {
currentTime: 0,
maxTime: 0,
playing: false,
muted: false,
speed: 1,
waiting: true,
preload: 'auto'
},
sliderTime: 0,
volume: 100,
speeds: this.theSpeeds,
controlList: {
//
noDownload: false,
//
noMuted: false,
//
noVolume: false,
//
noProcess: false,
//
onlyOnePlaying: false,
//
noSpeed: false
}
}
},
methods:{
setControlList () {
let controlList = this.theControlList.split(' ')
controlList.forEach((item) => {
if(this.controlList[item] !== undefined){
this.controlList[item] = true
}
})
},
changeSpeed() {
let index = this.speeds.indexOf(this.audio.speed) + 1
this.audio.speed = this.speeds[index % this.speeds.length]
this.$refs.audio.playbackRate = this.audio.speed
},
startMutedOrNot() {
this.$refs.audio.muted = !this.$refs.audio.muted
this.audio.muted = this.$refs.audio.muted
},
// toolTip
formatVolumeToolTip(index) {
return ' : ' + index
},
// toolTip
formatProcessToolTip(index = 0) {
index = parseInt(this.audio.maxTime / 100 * index)
return ' : ' + realFormatSecond(index)
},
//
changeVolume(index = 0) {
this.$refs.audio.volume = index / 100
this.volume = index
},
//
changeCurrentTime(index) {
this.pausePlay()
this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
},
startPlayOrPause() {
return this.audio.playing ? this.pausePlay() : this.startPlay()
},
//
startPlay() {
this.$refs.audio.play()
},
//
pausePlay() {
this.$refs.audio.pause()
},
//
onPause () {
this.audio.playing = false
},
// , loading
onError () {
this.audio.waiting = true
},
//
onWaiting (res) {
console.log(res)
},
//
onPlay (res) {
console.log(res)
this.audio.playing = true
this.audio.loading = false
if(!this.controlList.onlyOnePlaying){
return
}
let target = res.target
let audios = document.getElementsByTagName('audio');
[...audios].forEach((item) => {
if(item !== target){
item.pause()
}
})
},
// timeupdate ,
onTimeupdate(res) {
// console.log('timeupdate')
// console.log(res)
this.audio.currentTime = res.target.currentTime
this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
},
// ,
//
onLoadedmetadata(res) {
this.audio.waiting = false
this.audio.maxTime = parseInt(res.target.duration)
}
},
filters: {
formatSecond(second = 0) {
return realFormatSecond(second)
},
transPlayPause(value) {
return value ? ' ' : ' '
},
transMutedOrNot(value) {
return value ? ' ' : ' '
},
transSpeed(value) {
return ' : x' + value
}
},
created() {
this.setControlList()
}
}
</script>
CSS 코드 는 SCSS 를 사용 합 니 다.
<style scoped lang="scss">
.right{
width: 100%;
padding: 10px 15px;
display: inline-block;
.slider {
display: inline-block;
position: relative;
top: 14px;
margin-left: 15px;
}
.slider_time{
width: 550px;
margin: 0 10px;
}
.slider_voice{
width: 80px;
}
.download {
color: #409EFF;
margin-left: 15px;
}
.dn{
display: none;
}
}
</style>
또 하나의 아름 다운 테스트 음악 을 첨부 하 다.https://wdd.js.org/element-audio/static/falling-star.mp3
vue+element ui 가 플레이어 기능 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.vue element ui 플레이어 에 관 한 더 많은 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.