vue绑定html音乐播放器,Vue-audio实现音乐播放器托盘

:src="src"

ref="audio"

@timeupdate="onTimeUpdate"

@loadeddata="onLoad"

>

:min="0"

:max="duration"

v-model="progress"

:show-tooltip="false"

class="music-player-progress"

@change="handleProgressChange"

@mousedown.native="onMouseDown"

@mouseup.native="onMouseUp"

>

{{ musicInfo.name || '' }}

{{ formatDuration(progress) }}/{{ formatDuration(duration) }}

import { Vue, Component, Watch } from 'vue-property-decorator'

import { MusicApi } from '@/service/modules/index'

@Component({

name: 'MusicPlayer'

})

export default class MusicPlayer extends Vue {

// 播放链接

private src = ''

// 是否在播放

private playing = false

// 音量*100

private volumeSlide = 50

// 进度

private progress = 0

// 歌曲总时长

private duration = 0

// 是否处于拖动进度条状态

private isDrag = false

// 格式化

formatDuration(time: number) {

return (this as any).$formatDuration(time)

}

// 鼠标按下

onMouseDown() {

this.isDrag = true

}

// 鼠标抬起

onMouseUp() {

this.isDrag = false

}

// 修改进度

handleProgressChange(value: number) {

this.isDrag = false

this.progress = value

this.audioPlayer.currentTime = value

}

// 暂停

pause() {

if (this.audioPlayer) {

this.audioPlayer.pause()

}

this.playing = false

}

// 播放

play() {

this.playing = true

if (this.audioPlayer) {

;(this.audioPlayer as HTMLAudioElement).play()

}

}

// 更新时间

onTimeUpdate(e: any) {

if (this.audioPlayer && !this.isDrag) {

this.progress = this.audioPlayer.currentTime

}

}

// 加载完成

onLoad() {

this.duration = Math.ceil(this.audioPlayer.duration)

}

// 获取歌曲

get musicInfo() {

return this.$store.state.music.musicInfo

}

// audio实例

get audioPlayer(): HTMLAudioElement {

return this.$refs.audio as HTMLAudioElement

}

// 监听musicinfo变化

@Watch('musicInfo')

async handleMusicInfoChange(

newVal: { id: string; name: string; picUrl: string },

oldVal: { id: string; name: string; picUrl: string }

) {

try {

const res = await MusicApi.getMusicUrlById({ id: newVal.id })

if (res && res.data) {

this.src = res.data[0].url

setTimeout(() => {

this.play()

}, 500)

}

} catch (error) {

console.log(error)

}

}

// 监听音量变化

@Watch('volumeSlide')

handleVolumeSlideChange(newVal: number, oldVal: number) {

if (this.audioPlayer) {

this.audioPlayer.volume = Number((newVal / 100).toFixed(1))

}

}

mounted() {

this.progress = 0

this.duration = 0

}

}

@import url('../style/common.less');

.music-player {

position: relative;

height: 3rem;

padding: 0.3rem 0.4rem;

align-items: center;

&-progress {

position: absolute;

top: -0.9rem;

left: 0;

width: 100%;

::v-deep .el-slider__runway {

height: 0.1rem;

background-color: #ededed;

margin: 0.5rem 0;

.el-slider__button {

width: 0.1rem;

height: 0.1rem;

position: relative;

top: -2px;

border-color: @common-color;

}

.el-slider__bar {

bottom: 0;

height: 2px;

background-color: @common-color;

}

}

}

&-avatar {

.info {

font-size: 0.8rem;

padding-left: 0.5rem;

text-align: left;

div {

line-height: 1.2rem;

}

}

img {

width: 3rem;

height: 3rem;

}

}

&-btn {

font-size: 1rem;

color: @common-color;

cursor: pointer;

.icon-bofang,

.icon-bofang1 {

font-size: 2.2rem;

margin: 1rem;

}

.icon-shangyishou,

.icon-xiayishou {

position: relative;

bottom: 0.2rem;

font-size: 1.2rem;

}

.icon-shangyishou:hover,

.icon-xiayishou:hover {

transition: 200ms all ease-in;

font-size: 1.3rem;

}

}

&-operation {

::v-deep .el-slider {

width: 7rem;

height: 4px;

margin-right: 0.6rem;

.el-slider__runway {

height: 4px;

}

.el-slider__button-wrapper {

top: -0.8875rem;

.el-slider__button {

width: 0.3rem;

height: 0.3rem;

position: relative;

top: -1px;

border-color: @common-color;

}

}

.el-slider__bar {

background-color: @common-color;

}

}

.iconfont {

font-size: 1.1rem;

position: relative;

top: 0.5rem;

}

}

}

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值