javascript
使用JavaScript创建音乐播放器的案例详解
英文 |?https://www.geeksforgeeks.org/create-a-music-player-using-javascript/?ref=leftbar-rightbar
翻譯 | web前端開(kāi)發(fā)(ID:web_qdkf)
隨著越來(lái)越多的用戶(hù)使用流媒體,在線(xiàn)媒體播放器已成為消費(fèi)在Internet上必不可少的媒介。音樂(lè)播放器允許人們?cè)谌魏螢g覽器中欣賞音樂(lè),并支持離線(xiàn)音樂(lè)播放器的許多功能。
我們將創(chuàng)建一個(gè)用戶(hù)界面干凈的音樂(lè)播放器,可用于在瀏覽器中播放音樂(lè)。我們還將實(shí)現(xiàn)搜索和音量控制等功能。HTML在HTMLMediaElement接口中有幾種方法,可用于播放音頻文件并控制其播放,而無(wú)需使用任何其他庫(kù)。
我們首先將創(chuàng)建HTML,使用HTML布局定義播放器的結(jié)構(gòu),再通過(guò)使用CSS樣式使其外觀看起來(lái)更美觀,然后使用JavaScript編寫(xiě)它的所有功能,以及編寫(xiě)播放器邏輯。
HTML布局
HTML布局定義了將在頁(yè)面上顯示的元素結(jié)構(gòu)。播放器可以分為以下幾部分:
詳細(xì)信息部分:此部分顯示正在播放的當(dāng)前曲目的詳細(xì)信息。它包括曲目編號(hào),曲目專(zhuān)輯,曲目名稱(chēng)和曲目藝術(shù)家。
按鈕部分:此部分顯示用于控制曲目播放的按鈕。它包括播放/暫停按鈕,上上一曲和下一曲的曲目按鈕。它們將使用onclick()方法來(lái)實(shí)現(xiàn),該方法調(diào)用JavaScript文件中定義的特定函數(shù)。
滑塊部分:此部分包含可用于控制播放和音量的搜尋滑塊和音量滑塊。
我們將使用FontAwesome圖標(biāo)來(lái)獲取頁(yè)面上使用的所有按鈕的圖標(biāo)。文件中還將鏈接我們稍后將編寫(xiě)的自定義的CSS和JavaScript。
HTML代碼如下:
<!DOCTYPE?html>?<html lang="en"> <head> <title>Simple Music Player</title> <!-- Load FontAwesome icons --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <!-- Load the custom CSS style file --> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="player"> <!-- Define the p for displaying details --> <div class="details"> <div class="now-playing">PLAYING x OF y</div> <div class="track-art"></div> <div class="track-name">Track Name</div> <div class="track-artist">Track Artist</div> </div> <!-- Define the p for displaying track buttons --> <div class="buttons"> <div class="prev-track" onclick="prevTrack()"> <i class="fa fa-step-backward fa-2x"></i> </div> <div class="playpause-track" onclick="playpauseTrack()"> <i class="fa fa-play-circle fa-5x"></i> </div> <div class="next-track" onclick="nextTrack()"> <i class="fa fa-step-forward fa-2x"></i> </div> </div> <!-- Define the p for displaying the seek slider--> <div class="slider_container"> <div class="current-time">00:00</div> <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()"> <div class="total-duration">00:00</div> </div> <!-- Define the p for displaying the volume slider--> <div class="slider_container"> <i class="fa fa-volume-down"></i> <input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()"> <i class="fa fa-volume-up"></i> </div> </div> <!-- Load the main script for the player --> <script src="main.js"></script> </body> </html>CSS樣式
使用CSS我們可以設(shè)置不同部分的樣式,以使其在視覺(jué)上更具吸引力:
flex布局用于排列播放器的各種元素,并將它們與頁(yè)面的中間對(duì)齊。
軌道藝術(shù)圖像具有固定的尺寸,并使用border-radius屬性進(jìn)行了舍入。
這兩個(gè)滑塊已經(jīng)通過(guò)使用外觀屬性從其默認(rèn)外觀進(jìn)行了修改。更改高度和背景以適合配色方案。它們還具有輕微的透明度,可以使用transition屬性平滑過(guò)渡到完全不透明。
所有播放控件的cursor屬性均已設(shè)置,以便每當(dāng)鼠標(biāo)懸停在其上時(shí),它將變?yōu)橹羔槨?/p>
HTML布局和CSS樣式的結(jié)果將顯示以下外觀:
播放器的JavaScript邏輯:
播放器的邏輯在JavaScript文件中定義。有幾種功能可以共同處理播放器的所有功能。
步驟1:定義所有變量并訪(fǎng)問(wèn)HTML元素
首先使用querySelector()方法選擇HTML布局中要?jiǎng)討B(tài)更改的必需元素。然后為它們分配變量名,以便可以對(duì)其進(jìn)行訪(fǎng)問(wèn)和修改。還定義了將在整個(gè)程序中訪(fǎng)問(wèn)的其他變量。
步驟2:從軌道列表中加載新軌道在軌道列表中,
所有必須播放的軌道都被定義為對(duì)象。這些對(duì)象包含名稱(chēng),藝術(shù)家,圖像和軌道路徑等屬性。然后可以使用其軌道索引訪(fǎng)問(wèn)每個(gè)軌道。
要加載曲目,loadTrack()定義了一個(gè)函數(shù),該函數(shù)處理以下事情:
重置前一曲
目的所有值將創(chuàng)建一個(gè)resetValues()函數(shù),該函數(shù)在將新曲目開(kāi)始之前,將持續(xù)時(shí)間值和滑塊重置為初始值。這樣可以防止在加載新軌道時(shí)搜索滑塊跳動(dòng)。加載軌道
使用其src屬性為音頻元素分配一個(gè)新的源。可以給它來(lái)自文件系統(tǒng)或URL的任何路徑。然后在音頻元素上使用load()方法來(lái)準(zhǔn)備軌道。更新要顯示
的軌跡圖從陣列中獲取軌跡圖,并在backgroundImage屬性的幫助下進(jìn)行分配。更新要顯示
的軌道詳細(xì)信息從數(shù)組中獲取軌道詳細(xì)信息,并在textContent屬性的幫助下進(jìn)行分配。將事件偵聽(tīng)器添加到軌道
media元素上添加了兩個(gè)事件偵聽(tīng)器,第一個(gè)用于更新當(dāng)前搜索位置,第二個(gè)偵聽(tīng)器用于在當(dāng)前軌道結(jié)束時(shí)加載下一個(gè)軌道。設(shè)置隨機(jī)的彩色背景
通過(guò)對(duì)使用的紅色,綠色和藍(lán)色值進(jìn)行隨機(jī)化并將其設(shè)置為顏色來(lái)生成彩色背景。通過(guò)使用上的transition屬性來(lái)為效果設(shè)置動(dòng)畫(huà)background-color。
步驟3:配置播放器按鈕
函數(shù)playTrack()句柄當(dāng)前加載的曲目的播放。所述play()的HTMLMediaElement API的方法用于此功能。按鈕的圖標(biāo)也變?yōu)闀和D標(biāo)。這是通過(guò)使用FontAwesome庫(kù)中的圖標(biāo)之一并使用innerHTML插入它來(lái)完成的。
一個(gè)函數(shù)pauseTrack()處理當(dāng)前加載的曲目的播放。所述pause()的HTMLMediaElement API的方法用于此功能。按鈕的圖標(biāo)也變回播放圖標(biāo)。這是通過(guò)使用FontAwesome庫(kù)中的圖標(biāo)之一并使用innerHTML插入它來(lái)完成的。
根據(jù)軌道當(dāng)前是否正在播放來(lái)調(diào)用這兩個(gè)功能。playpause()函數(shù)處理軌道的實(shí)際播放/暫停控制。
函數(shù)prevTrack()處理上一曲目的加載并向后移動(dòng)索引。當(dāng)索引到達(dá)第一個(gè)曲目時(shí),索引會(huì)重置為最后一個(gè)曲目。上面定義的loadTrack()方法用于加載新軌道。
類(lèi)似地,一個(gè)函數(shù)nextTrack()處理下一個(gè)曲目的加載并向前移動(dòng)索引。當(dāng)索引到達(dá)最后一個(gè)音軌時(shí),索引會(huì)重置為第一個(gè)音軌。上面定義的loadTrack()方法用于加載新軌道。
function?playpauseTrack()?{? // Switch between playing and pausing // depending on the current state if (!isPlaying) playTrack(); else pauseTrack(); } function playTrack() { // Play the loaded track curr_track.play(); isPlaying = true; // Replace icon with the pause icon playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>'; } function pauseTrack() { // Pause the loaded track curr_track.pause(); isPlaying = false; // Replace icon with the play icon playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';; } function nextTrack() { // Go back to the first track if the // current one is the last in the track list if (track_index < track_list.length - 1) track_index += 1; else track_index = 0; // Load and play the new track loadTrack(track_index); playTrack(); } function prevTrack() { // Go back to the last track if the // current one is the first in the track list if (track_index > 0) track_index -= 1; else track_index = track_list.length; // Load and play the new track loadTrack(track_index); playTrack(); }步驟4:配置滑塊部分
我們將設(shè)置兩個(gè)滑塊,分別控制搜索滑塊和音量滑塊。
搜索滑塊
“搜索”滑塊通過(guò)用軌道的當(dāng)前時(shí)間進(jìn)行更新來(lái)在滑塊上顯示當(dāng)前播放位置。創(chuàng)建一個(gè)新函數(shù)seekUpdate(),以處理相對(duì)于軌道當(dāng)前時(shí)間的搜索滑塊的更新。搜索滑塊的位置是使用value屬性計(jì)算和設(shè)置的。現(xiàn)在,每次軌道進(jìn)一步前進(jìn)時(shí)都必須調(diào)用此函數(shù)。這可以通過(guò)安排每秒更新一次來(lái)完成。可以使用setInterval()方法(間隔為1000毫秒)來(lái)完成此操作。每次加載新曲目時(shí),都會(huì)清除此計(jì)時(shí)器。
此功能還可以處理經(jīng)過(guò)的時(shí)間和曲目的總持續(xù)時(shí)間的更改,該更改在每次觸發(fā)時(shí)都會(huì)更新。分鐘和秒分別計(jì)算并正確格式化以顯示。
音量滑塊
音量滑塊用于顯示曲目的當(dāng)前音量。創(chuàng)建了一個(gè)新函數(shù)setVolume(),每當(dāng)用戶(hù)對(duì)其進(jìn)行更改時(shí),該函數(shù)都會(huì)處理音量滑塊的設(shè)置。
步驟5:啟動(dòng)播放器
通過(guò)調(diào)用loadTrack()函數(shù)加載第一首曲目。這將從軌道列表中加載第一個(gè)軌道,并更新軌道的所有詳細(xì)信息。然后,用戶(hù)可以使用“播放”按鈕開(kāi)始播放曲目。上一個(gè)和下一個(gè)曲目按鈕將分別加載上一個(gè)和下一個(gè)曲目并開(kāi)始播放。
曲目播放完畢后,將自動(dòng)加載下一個(gè)曲目。用戶(hù)可以使用搜索滑塊在軌道中搜索位置。也可以使用音量滑塊調(diào)節(jié)音量。
// Load the first track in the tracklist loadTrack(track_index);最后演示
現(xiàn)在可以在任何瀏覽器中使用播放器了。可以將新曲目添加到曲目列表,以播放你選擇的音樂(lè)。
本文完~
視頻播放
總結(jié)
以上是生活随笔為你收集整理的使用JavaScript创建音乐播放器的案例详解的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 分析一个错误使用MemoryCache导
- 下一篇: 解决 Vue 请求拦截器 无法执行