mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-21 00:36:44 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
BIN
src/components/AudioPlayer/images/novolume.png
Normal file
BIN
src/components/AudioPlayer/images/novolume.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 614 B |
BIN
src/components/AudioPlayer/images/start.png
Normal file
BIN
src/components/AudioPlayer/images/start.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/components/AudioPlayer/images/stop.png
Normal file
BIN
src/components/AudioPlayer/images/stop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/components/AudioPlayer/images/volume.png
Normal file
BIN
src/components/AudioPlayer/images/volume.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 752 B |
332
src/components/AudioPlayer/index.vue
Normal file
332
src/components/AudioPlayer/index.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="boe-audio">
|
||||
<!-- 封面图 -->
|
||||
<!-- <div v-if="cover != null && isShowCover" class="audio-cover">
|
||||
<img :src="cover" alt="" />
|
||||
</div> -->
|
||||
<!-- <div class="title">{{ name }}</div> -->
|
||||
<audio :autoplay="autoplay" ref="audioPlayer" preload="auto" :src="url">
|
||||
你的浏览器不支持audio标签
|
||||
</audio>
|
||||
<div style="text-align: center;padding-top: 30px;cursor: pointer;">
|
||||
<i v-if="!isPlay" @click="playAudio" class="el-icon-video-play" style="font-size: 80px;color:#588afc;"></i>
|
||||
<i v-else class="el-icon-video-pause" @click="pauseAudio" style="font-size: 80px;color:#588afc;"></i>
|
||||
</div>
|
||||
<div class="player-controls-bottom">
|
||||
<div class="player-controls-bottom-left">
|
||||
<!-- 播放 -->
|
||||
<!-- <i class="el-icon-video-play" @click="playAudio" v-show="!isPlay"></i> -->
|
||||
<!-- 暂停 -->
|
||||
<!-- <i class="el-icon-video-pause" @click="pauseAudio" v-show="isPlay"></i> -->
|
||||
<div class="audio-player-btn cursor-pointer">
|
||||
<!-- <img v-if="!isPlay" src="@/components/AudioPlayer/images/start.png" @click="playAudio"/>
|
||||
<img v-else src="@/components/AudioPlayer/images/stop.png" @click="pauseAudio" /> -->
|
||||
</div>
|
||||
<!-- 快退 -->
|
||||
<!-- <i class="el-icon-d-arrow-left" @click="playAudioBack"></i> -->
|
||||
<!-- 快进 -->
|
||||
<!-- <i class="el-icon-d-arrow-right" @click="playAudioFast"></i> -->
|
||||
</div>
|
||||
<!-- 进度条 -->
|
||||
<div class="player-controls-bottom-center">
|
||||
<el-slider class="audio-slider" v-model="audioPercentage"
|
||||
:show-tooltip="false"
|
||||
@change="handleChange">
|
||||
</el-slider>
|
||||
</div>
|
||||
<div class="player-controls-bottom-right">
|
||||
<!-- 时间进度／总时长 -->
|
||||
<div class="audio-time">{{ audioCurrentTime }}／{{ audioAllTime }}</div>
|
||||
<!-- 设置倍速 -->
|
||||
<el-dropdown size="small" @command="changeSpeed">
|
||||
<span class="audio-speed cursor-pointer">{{ speed }}X</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item, index) in multipleArray" :key="index" :command="item">
|
||||
{{ item }}X
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<!-- 音量 -->
|
||||
<el-dropdown size="small" placement="bottom-start">
|
||||
<span class="audio-volume cursor-pointer">
|
||||
<img src="@/components/AudioPlayer/images/volume.png" v-if="!muted" />
|
||||
<img src="@/components/AudioPlayer/images/novolume.png" v-else />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-slider
|
||||
v-model="currVolume"
|
||||
vertical
|
||||
height="120px"
|
||||
:show-tooltip="false"
|
||||
@change="changeVolume"
|
||||
input-size="mini"
|
||||
></el-slider>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'mp3-show',
|
||||
props: {
|
||||
url: {
|
||||
// 地址
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
// name: {
|
||||
// // 名称
|
||||
// type: String,
|
||||
// require: false,
|
||||
// },
|
||||
progress: {
|
||||
// 默认播放的位置,第几秒
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
autoplay: {
|
||||
// 是否自动播放
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
timeInterval: {
|
||||
//快进快退间隔
|
||||
type: Number,
|
||||
default: 15,
|
||||
},
|
||||
// cover: {
|
||||
// // 封面图，为空默认显示系统默认
|
||||
// type: String,
|
||||
// require: false,
|
||||
// default: "",
|
||||
// },
|
||||
// isShowCover: {
|
||||
// // 是否显示封面，默认显示
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// },
|
||||
multipleArray: {
|
||||
// 倍速设置
|
||||
type: Array,
|
||||
default: () => ["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
|
||||
},
|
||||
isDrag:{
|
||||
type: Boolean,
|
||||
default: null,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
audioPercentage: 0, // 音频进度百分比
|
||||
audioCurrentTime: '00:00', // 音频当前播放时间
|
||||
audioAllTime: '00:00', // 音频总播放时间
|
||||
audioAllDuration: 0, // 音频总播放秒数
|
||||
isPlay: false, // 是否正在播放
|
||||
audioInterval: null, // 定时器
|
||||
speed: 1,
|
||||
muted: false, // 是否默认静音
|
||||
currVolume: 50, // 当前音量
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
let _this = this
|
||||
audioPlayer.addEventListener('loadedmetadata', function () {
|
||||
//当指定的音频的元数据已加载时，会发生 loadedmetadata 事件。
|
||||
_this.handleLoadedmetadata()
|
||||
})
|
||||
this.setAudioInterval()
|
||||
},
|
||||
destroyed: function () {
|
||||
clearInterval(this.audioInterval)
|
||||
},
|
||||
methods: {
|
||||
handleLoadedmetadata() {
|
||||
//当指定的音频的元数据已加载时。
|
||||
//console.log("加载完成，可以播放");
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
audioPlayer.currentTime = this.progress
|
||||
},
|
||||
/** 设置定时检测 */
|
||||
setAudioInterval() {
|
||||
this.audioInterval = setInterval(() => {
|
||||
this.getAudioTime()
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
if (this.isPlay) {
|
||||
// 正在播放
|
||||
this.$emit('onPlaying', this.audioCurrentTime,audioPlayer.currentTime) // 返回参数按需要定义
|
||||
}
|
||||
if (audioPlayer.ended) {
|
||||
// 播放结束后是否重置数据
|
||||
clearInterval(this.audioInterval)
|
||||
// this.audioPercentage = 0;
|
||||
// audioPlayer.currentTime = 0;
|
||||
// this.audioCurrentTime = '00:00';
|
||||
// this.isPlay = false;
|
||||
this.$emit('onPlayEnd', {}) // 返回参数按需要定义
|
||||
}
|
||||
audioPlayer.paused ? (this.isPlay = false) : (this.isPlay = true)
|
||||
}, 1000)
|
||||
},
|
||||
/** 播放 */
|
||||
playAudio() {
|
||||
// 重设定时器
|
||||
clearInterval(this.audioInterval)
|
||||
this.getAudioTime()
|
||||
this.setAudioInterval()
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
audioPlayer.volume = this.currVolume / 100
|
||||
audioPlayer.play()
|
||||
this.isPlay = true
|
||||
this.$emit('onPlay', {}) // 返回参数按需要定义
|
||||
},
|
||||
/** 快进 */
|
||||
playAudioFast() {
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
audioPlayer.currentTime = audioPlayer.currentTime + this.timeInterval
|
||||
},
|
||||
/** 快退 */
|
||||
playAudioBack() {
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
audioPlayer.currentTime = audioPlayer.currentTime - this.timeInterval
|
||||
},
|
||||
/** 暂停播放 */
|
||||
pauseAudio() {
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
audioPlayer.pause()
|
||||
this.isPlay = false
|
||||
this.$emit('onPause', {}) // 返回参数按需要定义
|
||||
},
|
||||
/** 获取播放时间 */
|
||||
getAudioTime() {
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
this.audioAllTime = this.formatTime(audioPlayer.duration)
|
||||
this.audioAllDuration = audioPlayer.duration
|
||||
this.audioCurrentTime = this.formatTime(audioPlayer.currentTime)
|
||||
//计算当前进度百分比
|
||||
this.audioPercentage = (
|
||||
(audioPlayer.currentTime * 100) /
|
||||
audioPlayer.duration
|
||||
).toFixed(3)
|
||||
this.audioPercentage = Number(this.audioPercentage)
|
||||
},
|
||||
/** 滑动进度条 */
|
||||
handleChange(value) {
|
||||
// 设置播放时间
|
||||
if(!this.isDrag) {
|
||||
return;
|
||||
}
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
this.audioCurrentTime = this.formatTime(
|
||||
(this.audioAllDuration * Number(value)) / 100
|
||||
)
|
||||
const currentTime = Number((this.audioAllDuration * value) / 100)
|
||||
audioPlayer.currentTime = parseInt(currentTime)
|
||||
},
|
||||
/** 设置倍速播放 */
|
||||
changeSpeed(command) {
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
audioPlayer.playbackRate = command
|
||||
this.speed = command
|
||||
},
|
||||
// 改变音量
|
||||
changeVolume(currVolume) {
|
||||
if (currVolume == 0) {
|
||||
this.muted = true
|
||||
} else {
|
||||
this.muted = false
|
||||
}
|
||||
this.currVolume = currVolume
|
||||
let audioPlayer = this.$refs.audioPlayer
|
||||
audioPlayer.volume = currVolume / 100
|
||||
},
|
||||
/** 时间格式话 */
|
||||
formatTime(second) {
|
||||
const secondType = typeof second
|
||||
if (secondType === 'number' || secondType === 'string') {
|
||||
second = parseInt(second)
|
||||
const mimute = Math.floor(second / 60)
|
||||
second = second - mimute * 60
|
||||
return ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
|
||||
} else {
|
||||
return '00:00'
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.boe-audio {
|
||||
// .audio-cover {
|
||||
// width: 100%;
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
// .title {
|
||||
// text-align: left;
|
||||
// padding: 5px 15px;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.player-controls-bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.player-controls-bottom-left {
|
||||
padding: 0.6rem 0.4rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.audio-player-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.player-controls-bottom-right {
|
||||
display: inline-flex;
|
||||
padding: 0.6rem 0.4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.audio-time {
|
||||
font-size: 13px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.audio-speed {
|
||||
font-size: 13px;
|
||||
margin: 0 10px;
|
||||
padding: 2px 5px;
|
||||
background: #efefef;
|
||||
width: 45px;
|
||||
text-align: center;
|
||||
border-radius: 10%;
|
||||
display: inline-block;
|
||||
}
|
||||
.audio-volume {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.player-controls-bottom-center {
|
||||
display: inline-block;
|
||||
padding: 0.6rem 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
.audio-slider {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user