繼上次的vue-aplayer 栽倒在我手上 bug連連 崩潰邊緣壓力之下 決心自己擼一個
直到遇到它---audio標簽 希望之火再度點燃
開擼
技術點
vue + element UI
主要實現
1：點擊音樂列表 播放相應音樂
2：播放 暫停 拖動快進 點擊快進
3：時長各種更新
話不多說 樣子捏出來先
整體思路 過濾組件控制播放暫停狀態顯示 整數轉換成時分秒格式 1秒1下更新音頻當前播放時間 拖動 點擊 獲取最新時間 音頻時間與進度條同步更新
整數換算時分秒方法
組件過濾 處理狀態顯示 與 時分秒轉換
html界面布局 事件綁定
話不多說貼代碼就完事了
主要理解audio標簽中的事件 清楚自己在每一個事件中要做的操作 多方面考慮播放的邏輯與播放的各種奇葩方式並做正常處理
進度條偶爾失靈 發現是音樂在播放的同時 進度條在鼠標的脅迫下左右亂滑 面對這種高頻率 時間事件上偶爾會更新不過來 我的這種解決方式可能粗暴了點 即 當他按下鼠標拖動時 將音樂暫停播放
鼠標抬起 從當前的最新時間開始播放 操作中 注意控制鼠標按下抬起的范圍
大致就是這么個事
嗯
自己這是純記錄
草率了點
不是教學貼
需要詳細教學可goooooogle bd一下
上有詳細教學手把手教你擼~~
最后
插上耳機
選擇那么一首歌曲
點擊播放按鈕 伴隨着 小logo的起伏 悠揚的聲音從耳機傳來~~~
完事兒~~
