您現在的位置是:電腦技術吧?>? 編程技術 ??>??炫酷播放器,炫酷的播放器是怎樣弄的??>??正文詳情

炫酷播放器,炫酷的播放器是怎樣弄的

巫馬鵬濤2019-11-17 04:20:35 人圍觀
簡介AcG播放器上圖是音頻播放器的用戶界面,其中還隱藏了歌曲的播放列表。整個播放器的界面除了大背景的人像圖和歌曲的星譜外,都是用CSS和字體來繪制的。看來唯一的困難就是CD和C電

上圖便是這個音頻播放器的UI界面圖,里面還隱藏了一個歌曲的播放列表。

整個播放器的UI除了大背景的人像圖和歌曲的星星評分使用了圖片其他全部由CSS和font-face繪制而成,看上去有難度的地方就只有CD和打碟器的制作了,在歌曲播放時CD和打碟器都是具有動畫交互效果的,這個在后面的部分會講解到。

點擊播放器的CD可以打開播放列表噢~因為這一期的教程主要是為了展示Html5新增的audio標簽和audio元素的Dom API的使用,所以播放器UI的繪制在這里就不詳細解釋了,有疑問的可以自行查看案例的CSS文件的注釋或者在下方留言。

主要功能:一、播放、暫停、上一首、下一首、音量增減二、點擊CD可以打開和關閉播放列表三、可以拖動本地音樂文件到播放器進行播放Html結構代碼如下:div id=myAudio style=margin:0 auto;audiosource title=王若琳 - Wild World.mp3 src=a href=http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3/a /source title=韋禮安 - 還是會.mp3 src=a href=http://stream18.qqmusic.qq.com/31005070.mp3http://stream18.qqmusic.qq.com/31005070.mp3/a /source title=王若琳 - Lost in paradise.mp3 src=a href=http://stream12.qqmusic.qq.com/30416842.mp3http://stream12.qqmusic.qq.com/30416842.mp3/a //audiodiv class=music_info clearfixdiv class=cd_holderspan class=stick/spandiv class=cd/div/divdiv class=meta_dataspan class=title/spandiv class=ratingdiv class=starbarul class=current-rating data-score=85li class=star5/lili class=star4/lili class=star3/lili class=star2/lili class=star1/li/ul/div/divdiv class=volume_controla class=decreasea/aspan class=base_barspan class=progress_bar/spana class=slider/a/spana class=increaseb/a/div/div/divul class=music_list/uldiv class=controlsdiv class=play_controlsa class=btn_previouse/aa class=btn_playc/aa class=btn_nextd/a/divdiv class=time_linespan class=passed_time0:00/spanspan class=base_barspan class=progress_bar/span/spanspan class=total_time0:00/span/div/div/divaudio標簽在上面的結構中我們可以發現這個html5新增的audio標簽,它具有一個controls屬性,顧名思義它是播放器的控制器,controls 屬性規定瀏覽器為音頻提供播放控件,例如在chrome瀏覽器下的audio標簽中設置該屬性,播放器就會以如下的形式出現,如果不設置該屬性,則會是空白一片代碼如下:audio controls src=xxx.mp3/audio

但由于在不同瀏覽器下的對audio標簽渲染效果不一,這種簡易的方法并不適合在跨瀏覽器下的使用,并且瀏覽器默認的播放器控件所提供的功能實在是太少了。

所以我們一般通過不設置該屬性的方法來隱藏瀏覽器的默認播放控件,并且手工加入額外的標簽和樣式來定制播放器的UI界面。

播放控制在播放器的UI界面繪制完成后,首先我們需要做的是為播放、上一首、下一首這三個主要的控制按鈕添加對應的事件監聽。

復制代碼代碼如下:var myAudio = $(#myAudio audio)[0];var $sourceList = $(#myAudio source);var currentSrcIndex = 0;var currentSr = ;復制代碼代碼如下:$(.btn_play).click(function(){if (myAudio.paused) {myAudio.play();} else {myAudio.pause();}});$(.btn_next).click(function(){ currentSrcIndex $sourceList.length - 1 (currentSrcIndex = 0);currentSrc = $(#myAudio source).eq(currentSrcIndex).prop(src);myAudio.src = currentSrc;myAudio.play();});$(.btn_previous).click(function(){--currentSrcIndex 0 (currentSrcIndex = 0);currentSrc = $(#myAudio source).eq(currentSrcIndex).prop(src);myAudio.src = currentSrc;myAudio.play();});上述的按鈕點擊的事件監聽中,我們通過調用原始的audio元素的play()和pause()方法來控制音頻的播放和暫停。

另外audio元素提供了currentSrc屬性,該屬性表示當前播放文件的文件源,我們通過設置該屬性來控制當前播放的歌曲曲目。

音量控制接下來我們來對音量條兩邊的兩個小喇叭添加事件監聽,使得通過點擊左右兩個小喇叭可以減小和增加當前播放的音量。

要設置播放器的音量,我們可以調用audio元素中所提供的volume屬性。

volume值最大為1,最小為0,在這里我們通過每次點擊喇叭增減0.1的音量來實現音量的控制。

當然你也可以使用別的值。

但要注意的是javascript語言不能對小數提供精準的控制,所以每次減少0.1的音量時實際上減少的音量是稍微地大于0.1的,這導致當連續點擊9次音量減少的按鈕時剩下0.09xxxx的音量,然后你會發現播放器怎么無法靜音了。

當然這個問題是很容易解決的(如下所示),只是稍作提醒。

代碼如下:$(.volume_control .decrease).click(function() {var volume = myAudio.volume - 0.1;volume 0 (volume = 0);myAudio.changeVolumeTo(volume);});$(.volume_control .increase).click(function() {var volume = myAudio.volume 0.1;volume 1 (volume = 1);myAudio.changeVolumeTo(volume);});另外我們還需要實現使用滑動器或者點擊音量條某一位置來調控音量的功能,有了上面的基礎,這個就容易完成了。

首先我們來看看點擊音量條某一位置來調控音量的功能:點擊音量條的某一位置,計算該由音量條的起點到該位置的長度值,再用該值除以總的音量條長度(在這里是100)得到百分比值,再用該百分比值乘以最大音量值1得到所要跳躍到的音量值,再賦值給volume。

通過滑動器來調控音量的方法實現也與此類似,主要是要懂得如何計算滑動器在音量條的位置值。

在此就不做詳細解釋,有問題可以下方留言。

代碼如下:$(.volume_control .base_bar).mousedown(function(ev){var posX = ev.clientX;var targetLeft = $(this).offset().left;var volume = (posX - targetLeft)/100;volume 1 (volume = 1);volume 0 (volume = 0);myAudio.changeVolumeTo(volume);});$(.volume_control .slider).mousedown(starDrag = function(ev) {ev.preventDefault();var origLeft = $(this).position().left; /*滑塊初始位置*/var origX = ev.clientX; /*鼠標初始位置*/var target = this;var progress_bar = $(.volume_control .progress_bar)[0];$(document).mousemove(doDrag = function(ev){ev.preventDefault();var moveX = ev.clientX - origX; /*計算鼠標移動的距離*/var curLeft = origLeft moveX; /*用鼠標移動的距離表示滑塊的移動距離*/(curLeft -7) (curLeft = -7);(curLeft 93) (curLeft = 93);target.style.left = curLeft px;progress_bar.style.width = curLeft 7 %;myAudio.changeVolumeTo((curLeft 7)/100);});$(document).mouseup(stopDrag = function(){$(document).unbind(mousemove,doDrag);$(document).unbind(mouseup,stopDrag);});});時間控制好了,現在播放器已經基本能用了,但我們還希望能夠直接跳過音頻的一部分到特定的時間點。

那么要怎么實現呢?

!制定標準的委員們也不是傻子,這種常用的功能是不會有所疏漏的拉~所以趕緊翻翻API吧,你會發現audio元素提供了一個名為currentTime的屬性,非常簡明易懂的名稱(其實大多屬性都是很好理解的),設置該屬性可以設置當前播放的時間點。

在這里,我們還需要使用audio的另一個屬性duration,該屬性指的是當前播放文件的總時間長度。

因此根據音量控制的實現,我們可以這樣做:一、點擊進度條的某一位置,計算該由進度條的起點到該位置的長度占總進度條長度的百分比值(例如點擊進度條的正中間位置,則進度條的起點到該位置的長度占總進度條長度的50%),記為percentage。

二、然后用percentage乘以文件的總時間長度duration就得到了你想要跳躍到的時間點的值,再把該值賦給currentTime即完成了所要實現的功能。

代碼如下:$(.time_line .base_bar).mousedown(function(ev){var posX = ev.clientX;var targetLeft = $(this).offset().left;var percentage = (posX - targetLeft)/140 * 100;myAudio.currentTime = myAudio.duration * percentage / 100;});到這里,播放器已經基本成型了。

剩下一些無關痛癢(其實對我來說才是最重要的哈哈)的UI交互實現,如果大家有興趣的話就到源碼中查看吧,有問題可以在下方評論留言,希望能多多交流和學習。

版權聲明:本文由 巫馬鵬濤 整理編輯。

原標題:炫酷效果的播放器,酷炫音樂播放器

轉載注明出處:http://www.dn9ww09s.icu/program/13051.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • wps行距怎么調小,wps里行距怎么調整

    wps行距怎么調小,wps里行距怎么調整 相關圖片wps表格上下間距怎么調在使用WPS時,在輸入文檔內容的同時,我們還將設置文本的間距和行距,這將使文檔更加美觀,滿足我們的要求。但是,如果使用較少的WPS,則可以設置行距wps冒...

  • icon圖標,iconfont圖標

    icon圖標,iconfont圖標 相關圖片icon設計現在越來越多的移動應用和web應用開始重視動態效果的設計,它能給用戶帶來愉悅的交互體驗,是應用美觀的重要組成部分。(`)圖標,即圖標。在交互過程中,各種圖標的應圖...

  • 電腦用格式工廠怎么剪輯視頻,格式工廠截取片段

    電腦用格式工廠怎么剪輯視頻,格式工廠截取片段 相關圖片格式工廠無法再次截取作為互聯網上最強大的免費視頻編輯工具,format factory被認為有很多剛使用過這個軟件的新手朋友。他們不知道如何從format factory截取視頻以格式工廠如何剪掉不要...

  • ppt保存格式,excel保存格式

    ppt保存格式,excel保存格式 相關圖片excel保存后格式消失文本區域的格式在保存時可以保存到數據庫中,但在顯示時,由于/N和不能相互旋轉,頁面不能按開頭的格式顯示,因此在顯示頁面時,應該在值外嵌套一層標簽,即...

  • win10臨時文件能刪嗎,c盤臨時文件可以清理嗎

    win10臨時文件能刪嗎,c盤臨時文件可以清理嗎 相關圖片windows臨時安裝文件可以刪除嗎在Windows系統中,臨時文件的積累是導致系統運行緩慢的一個非常重要的原因。我可以刪除臨時Windows文件嗎?臨時windows文件夾在哪里?讓我們用超人軟win...

  • steam無充值加好友,steam怎么設置拒絕加好友

    steam無充值加好友,steam怎么設置拒絕加好友 相關圖片steam0級加好友如果在steam平臺上下載安裝游戲,當一些游戲需要邀請好友參與時,可以直接粉碎steam搜索好友,與好友一起體驗游戲的樂趣。但有些用戶仍然不知道如何在steam網頁版stea...

  • reset,reset是什么

    reset,reset是什么 相關圖片trip reset什么意思在當今的Web設計/開發實踐中,使用CSS向語義(x)HTML標記添加樣式樣式是一個重要的關鍵。在設計師的夢想中,有一個完美的世界:所有瀏覽器都可以理解和應用多電腦...

  • wps公式編輯器無法使用,wps重新安裝公式編輯器

    wps公式編輯器無法使用,wps重新安裝公式編輯器 相關圖片wps公式編輯如何改變字體在使用WPS進行編輯時,有時需要插入公式,但此時,我們發現公式的選項將變為灰色并且不可用。怎么了?WPS公式編輯器不能做什么?下面的小編輯為您帶來W...

  • 圖像網格轉換,醫學圖像與網格

    圖像網格轉換,醫學圖像與網格 相關圖片怎樣關閉ps打開圖像上的網格網格化圖像效果在設計中也很常見,如圖4-127所示。此效果適合作為網頁或列的背景圖像。具體制作方法如下:圖4-127網格圖像效果1。打開焰火中的材質圖像...

  • win7無法關機修復工具,win7一直顯示正在關機

    win7無法關機修復工具,win7一直顯示正在關機 相關圖片w7系統不能關機怎么辦最近,很多win7的用戶和朋友都報告說,當他們想關機時,點擊關機按鈕總是無法反映。那么如果win7不能關閉呢?現在,超人軟件編輯器告訴你,如果win7點擊關閉,...

熱評文章

  • 三星手機突然網速很慢,三星s8上網速度慢

    三星手機突然網速很慢,三星s8上網速度慢 相關圖片手機網絡太慢了我相信對于三星手機用戶來說,最麻煩的是上網速度慢。三星上網速度慢怎么辦?三星上網速度慢怎么辦?讓我們用超人軟件來了解一下,三星的網速慢怎么辦?一。移...

  • css水平垂直居中,css中圖片垂直居中

    css水平垂直居中,css中圖片垂直居中 相關圖片css垂直對齊今天,我想和大家分享純CSS實現的垂直時間線效果。垂直時間線適用于具有類似任務調度的頁面。實現采用藍色作為主題色,界面效果良好。讓我們看看呈現:實現代碼HTML...

  • word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦

    word怎么讓頁碼從某一頁開始,word不顯示頁碼怎么辦 相關圖片wps怎么從第三頁開始設置頁碼當使用WPS輸入文檔時,我們有時會在文檔中添加頁碼,以便標準化和便于查看。但是,如果您的文檔包含封面和目錄,則封面和目錄的前兩頁應從頁碼中刪...

  • 釘釘管理員有哪些權限,釘釘管理員權限在哪里

    釘釘管理員有哪些權限,釘釘管理員權限在哪里 相關圖片釘釘群管理員權限釘住是目前非常流行的企業通信軟件。各部門組和企業集團之間可以方便的溝通,使團隊合作更加高效。各小組的組長管理基本上是各部門的組長。因為工作很忙,有...

  • 火焰特效,ae怎么做火焰特效

    火焰特效,ae怎么做火焰特效 相關圖片ae手上火焰特效本教程介紹了利用flash CS5創建鼠標觸發的煙花落下交互效果,主要是利用計算鼠標跟隨物體產生火花效果,用一定的規則將鼠標掃過屏幕,你可以看到華麗的互動效果Ia...

  • 出現異常,應用出現異常

    出現異常,應用出現異常 相關圖片ping的過程出現異常近日,不少pptv用戶和朋友反映,他們在使用pptv的過程中出現了異常錯誤。那么pptv的異常錯誤呢?現在,超人軟件編輯將介紹如何解決pptv的異常錯誤。讓我們QQ出現異...

  • 繪制矩形,在草圖中繪制矩形的方法

    繪制矩形,在草圖中繪制矩形的方法 相關圖片如何畫矩形讓我們看一看畫布上一個簡單的幾何矩形的繪圖。在畫布中,有三種方法可以繪制矩形:填充矩形、筆劃矩形和清除矩形。當然,我們也可以使用路徑來描繪所有形狀,包括...

  • 為什么下載不了pp助手,為何pp助手安裝失敗

    為什么下載不了pp助手,為何pp助手安裝失敗 相關圖片為什么用pp助手安裝不了軟件最近,很多小伙伴都反映,他們在使用PP助手安裝軟件時,總會提示出現安裝失敗的異常現象。PP助手安裝失敗的原因是什么?如果PP助手無法安裝應用程序,...

  • sgtool應用程序錯誤,logonui應用程序錯誤

    sgtool應用程序錯誤,logonui應用程序錯誤 相關圖片update.exe應用程序出錯想必很多用戶都遇到過這樣的情況:打開電腦后,系統會提示ravmond.exe應用程序出錯。如何解決ravmond.exe的應用錯誤?什么是ravmond.exe應用程序錯誤0xc0000142...

  • 涂鴉效果,涂鴉

    涂鴉效果,涂鴉 相關圖片人物涂鴉煙火制作的涂鴉效果作品題目:雨后廁所外的涂鴉創意:它展現了前現代年輕人的憤世嫉俗、些許頹廢和熱愛生活的態度這部作品需要:插件:eyecandy 4.0過濾字體:ps如何做涂鴉...

關注微信

变脸官网查询