vue-audio元件,支援拖拽

阿新 • • 發佈：2018-12-23

// 將整數轉換成時：分：秒的格式 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 { data() { return { sliderTime: 0, audio: { // 該欄位是音訊是否處於播放狀態的屬性 playing: false

, // 音訊當前播放時長 currentTime: 0, // 音訊最大播放時長 maxTime: 0, minTime:0, step:0.1 } } }, methods: { // 控制音訊的播放與暫停 startPlayOrPause() { console.log(this.audio.playing) return

this.audio.playing ? this.pause() : this.play() }, // 播放音訊 play() { console.log('你的播放開啟了') this.$refs.audio.play() }, // 暫停音訊 pause() { this.$refs.audio.pause() }, // 當音訊播放 onPlay() { console.log('檢測到你播放中') this.audio.playing = true }, // 當音訊暫停 onPause() { this.audio.playing = false }, handleFocus() { console.log('focues') }, // 當載入語音流元資料完成後，會觸發該事件的回撥函式 // 語音元資料主要是語音的長度之類的資料 onLoadedmetadata(res) { console.log('loadedmetadata') // console.log(res) this.audio.maxTime = parseInt(res.target.duration) }, // 當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) }, // 進度條格式化toolTip formatProcessToolTip(index = 0) { index = parseInt(this.audio.maxTime / 100 * index) return '進度條: ' + realFormatSecond(index) }, handleTouchStart(e) { this.setValue(e.touches[0]); document.addEventListener('touchmove', this.handleTouchMove); document.addEventListener('touchup', this.handleTouchEnd); document.addEventListener('touchend', this.handleTouchEnd); document.addEventListener('touchcancel', this.handleTouchEnd); // e.preventDefault(); // this.onDragStart(e); }, handleTouchMove(e){ console.log(e.changedTouches[0]) this.setValue(e.changedTouches[0]); }, handleTouchEnd(e) { this.setValue(e.changedTouches[0]); document.removeEventListener('touchmove', this.handleTouchMove); document.removeEventListener('touchup', this.handleTouchEnd); document.removeEventListener('touchend', this.handleTouchEnd); document.removeEventListener('touchcancel', this.handleTouchEnd); // this.onDragStop(e); }, // 從點選位置更新 value setValue(e) { const $el=this.$el; const { maxTime, minTime, step } = this.audio; let value = (e.clientX - $el.getBoundingClientRect().left) / $el.offsetWidth * (maxTime - minTime); value = Math.round(value / step) * step + minTime; value = parseFloat(value.toFixed(5)); if (value > maxTime) { value = maxTime; } else if (value < minTime) { value = minTime; } this.$refs.audio.currentTime = value; }, // 拖動進度條，改變當前時間，index是進度條改變時的回撥函式的引數0-100之間，需要換算成實際時間 changeCurrentTime(index) { console.log('拖動進度條') // this.audio.playing && this.pause(); // console.log('拖動了',index,this.sliderTime,this.audio.maxTime,parseInt(index / 100 * this.audio.maxTime)) // !this.audio.playing && this.play(); this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime) } }, filters: { // 使用元件過濾器來動態改變按鈕的顯示 transPlayPause(value) { return value ? '暫停' : '播放' }, // 將整數轉化成時分秒 formatSecond(second = 0) { return realFormatSecond(second) } } }

vue-audio元件,支援拖拽

vue-audio元件,支援拖拽

vue上傳圖片元件（支援拖拽資料夾上傳）

文字、圖片左右無縫滾動效果--支援拖拽

vue elemenet 彈窗拖拽

【前端】利用Canvas給圖片新增水印，支援拖拽、編輯、縮放與刪除

簡單封裝一個上傳外掛——支援拖拽和預覽

javascript元件——可拖拽模態框

vue.draggable 編寫表格拖拽排序

MFC中實現單個控制元件接收拖拽檔案的功能

mb載入百度首頁，input框不支援拖拽文字的研究

UGUI控制元件可拖拽移動類元件

VC 樹控制元件的拖拽實現 MFC

vue自定義指令拖拽事件

自定義控制元件——可拖拽排序的ListView

解決谷歌瀏覽器擴充套件程式中無法安裝vue-devtools外掛或者拖拽安裝後報錯的情況

Qt無邊框窗體-最大化時支援拖拽還原

C#開發PACS醫學影像處理系統(九)：序列控制元件與拖拽

vue拖拽克隆元件 vue.draggable API options實現盒子之間相互拖拽排序克隆clone

vue元件拖拽-矩形自由拖拽

vue esview 控制元件拖拽問題（二）Vue.directiove自定義命令

vue-audio元件,支援拖拽

相關推薦