當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

使用JavaScript创建音乐播放器的案例详解

發(fā)布時(shí)間：2023/12/31 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了使用JavaScript创建音乐播放器的案例详解小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

英文 |?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>  <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">  <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="player">  <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>  <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>  <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>  <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>  <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>

body?{? background-color: lightgreen; /* Smoothly transition the background color */ transition: background-color .5s; } /* Using flex with the column direction to align items in a vertical direction */.player { height: 95vh; display: flex; align-items: center; flex-direction: column; justify-content: center; } .details { display: flex; align-items: center; flex-direction: column; justify-content: center; margin-top: 25px; } .track-art { margin: 25px; height: 250px; width: 250px; background-image: URL( "https://source.unsplash.com/Qrspubmx6kE/640x360"); background-size: cover; background-position: center; border-radius: 15%; } /* Changing the font sizes to suitable ones */.now-playing { font-size: 1rem; } .track-name { font-size: 3rem; } .track-artist { font-size: 1.5rem; } /* Using flex with the row direction to align items in a horizontal direction */.buttons { display: flex; flex-direction: row; align-items: center; } .playpause-track, .prev-track, .next-track { padding: 25px; opacity: 0.8; /* Smoothly transition the opacity */ transition: opacity .2s; } /* Change the opacity when mouse is hovered */.playpause-track:hover, .prev-track:hover, .next-track:hover { opacity: 1.0; } /* Define the slider width so that it scales properly */.slider_container { width: 75%; max-width: 400px; display: flex; justify-content: center; align-items: center; } /* Modify the appearance of the slider */.seek_slider, .volume_slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 5px; background: black; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } /* Modify the appearance of the slider thumb */.seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 15px; height: 15px; background: white; cursor: pointer; border-radius: 50%; } /* Change the opacity when mouse is hovered */.seek_slider:hover, .volume_slider:hover { opacity: 1.0; } .seek_slider { width: 60%; } .volume_slider { width: 30%; } .current-time, .total-duration { padding: 10px; } i.fa-volume-down, i.fa-volume-up { padding: 10px; } /* Change the mouse cursor to a pointer when hovered over */i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward { cursor: pointer; }

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)的其他變量。

// Select all the elements in the HTML page // and assign them to a variable let now_playing = document.querySelector(".now-playing"); let track_art = document.querySelector(".track-art"); let track_name = document.querySelector(".track-name"); let track_artist = document.querySelector(".track-artist"); let playpause_btn = document.querySelector(".playpause-track"); let next_btn = document.querySelector(".next-track"); let prev_btn = document.querySelector(".prev-track"); let seek_slider = document.querySelector(".seek_slider"); let volume_slider = document.querySelector(".volume_slider"); let curr_time = document.querySelector(".current-time"); let total_duration = document.querySelector(".total-duration"); // Specify globally used values let track_index = 0; let isPlaying = false; let updateTimer; // Create the audio element for the player let curr_track = document.createElement('audio'); // Define the list of tracks that have to be played let track_list = [ { name: "Night Owl", artist: "Broke For Free", image: "Image URL", path: "Night_Owl.mp3"}, { name: "Enthusiast", artist: "Tours", image: "Image URL", path: "Enthusiast.mp3"}, { name: "Shipping Lanes", artist: "Chad Crouch", image: "Image URL", path: "Shipping_Lanes.mp3", }, ];

步驟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。

function?loadTrack(track_index)?{? // Clear the previous seek timer clearInterval(updateTimer); resetValues(); // Load a new track curr_track.src = track_list[track_index].path; curr_track.load(); // Update details of the track track_art.style.backgroundImage = "url(" + track_list[track_index].image + ")"; track_name.textContent = track_list[track_index].name; track_artist.textContent = track_list[track_index].artist; now_playing.textContent = "PLAYING " + (track_index + 1) + " OF " + track_list.length; // Set an interval of 1000 milliseconds // for updating the seek slider updateTimer = setInterval(seekUpdate, 1000); // Move to the next track if the current finishes playing // using the 'ended' event curr_track.addEventListener("ended", nextTrack); // Apply a random background color random_bg_color(); } function random_bg_color() { // Get a random number between 64 to 256 // (for getting lighter colors) let red = Math.floor(Math.random() * 256) + 64; let green = Math.floor(Math.random() * 256) + 64; let blue = Math.floor(Math.random() * 256) + 64; // Construct a color withe the given values let bgColor = "rgb(" + red + ", " + green + ", " + blue + ")"; // Set the background to the new color document.body.style.background = bgColor; } // Functiom to reset all values to their default function resetValues() { curr_time.textContent = "00:00"; total_duration.textContent = "00:00"; seek_slider.value = 0; }

步驟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è)置。

function?seekTo()?{? // Calculate the seek position by the // percentage of the seek slider // and get the relative duration to the track seekto = curr_track.duration * (seek_slider.value / 100); // Set the current track position to the calculated seek position curr_track.currentTime = seekto; } function setVolume() { // Set the volume according to the // percentage of the volume slider set curr_track.volume = volume_slider.value / 100; } function seekUpdate() { let seekPosition = 0; // Check if the current track duration is a legible number if (!isNaN(curr_track.duration)) { seekPosition = curr_track.currentTime * (100 / curr_track.duration); seek_slider.value = seekPosition; // Calculate the time left and the total duration let currentMinutes = Math.floor(curr_track.currentTime / 60); let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60); let durationMinutes = Math.floor(curr_track.duration / 60); let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60); // Add a zero to the single digit time values if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; } if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; } if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; } if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; } // Display the updated duration curr_time.textContent = currentMinutes + ":" + currentSeconds; total_duration.textContent = durationMinutes + ":" + durationSeconds; } }

步驟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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：分析一个错误使用MemoryCache导
下一篇：解决 Vue 请求拦截器无法执行