快捷導(dǎo)航

利用JavaScript實(shí)現(xiàn)點(diǎn)擊音頻實(shí)現(xiàn)播放功能

更新時(shí)間：2025年06月14日 14:19:27 作者：妮在想什么

這篇文章主要介紹了關(guān)于如何利用JavaScript實(shí)現(xiàn)點(diǎn)擊音頻實(shí)現(xiàn)播放功能,文中通過(guò)示例講解了使用HTML、CSS和JavaScript結(jié)合jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)易音頻播放器,包含播放、暫停及倒計(jì)時(shí)功能,適用于學(xué)習(xí)平臺(tái)等場(chǎng)景,需要的朋友可以參考下

前言

今天通過(guò) HTML、CSS 和 JavaScript 模擬一個(gè)簡(jiǎn)易的音頻播放器。它使用了基本的音頻控制邏輯，并結(jié)合 jQuery 來(lái)管理用戶的交互。讓我們來(lái)詳細(xì)解讀這段代碼。

1. HTML 部分：音頻播放控件

首先，我們的 HTML 結(jié)構(gòu)非常簡(jiǎn)單，它包含一個(gè)帶有播放按鈕和時(shí)間顯示的 <div> 元素。

<div class="audioDiv" id="playButton">
    <img src="./img/yuyin.png" alt="播放圖標(biāo)" />
    <p id="countdown">4:31</p>
    <p id="bofang">播放錄音</p>
</div>

<div class="audioDiv" id="playButton">: 這是外部容器，采用了 flex 布局，保證了內(nèi)容在水平方向上居中對(duì)齊，并且背景色是淺灰色。這個(gè)容器用來(lái)顯示音頻播放控件。
<img src="./img/yuyin.png" alt="播放圖標(biāo)" />: 這是播放按鈕，顯示一個(gè)播放圖標(biāo)。它會(huì)作為按鈕，用戶點(diǎn)擊它時(shí)會(huì)觸發(fā)音頻的播放。
<p id="countdown">4:31</p>: 用來(lái)顯示音頻剩余時(shí)間的倒計(jì)時(shí)。初始值為 4 分 31 秒，即音頻的總時(shí)長(zhǎng)。
<p id="bofang">播放錄音</p>: 這是文本提示，表明這個(gè)按鈕的功能是播放錄音。

2. CSS 部分：樣式設(shè)置

CSS 主要負(fù)責(zé)設(shè)置播放器的外觀和布局。通過(guò)以下樣式，確保了播放器的基本功能和用戶體驗(yàn)：

.audioDiv {
    display: flex;
    align-items: center;
    width: 204px;
    height: 29px;
    background-color: #a0a0a0;
    border-radius: 9px;
    padding: 10px;
    cursor: pointer;
}

display: flex 讓內(nèi)部元素（圖標(biāo)、倒計(jì)時(shí)和文本）水平排列并居中。
background-color: #a0a0a0 設(shè)置播放器背景色為灰色，給人簡(jiǎn)潔的視覺(jué)效果。
border-radius: 9px 使播放器的邊緣呈圓角。

此外，按鈕的樣式（包括圖片大小、文本的顯示等）都確保了控件的清晰和簡(jiǎn)潔。

3. JavaScript 部分：音頻控制

JavaScript 是實(shí)現(xiàn)音頻播放功能的核心部分。在這里，我們通過(guò) jQuery 處理了音頻播放和倒計(jì)時(shí)的更新。以下是關(guān)鍵邏輯：

播放和暫停音頻：

當(dāng)用戶點(diǎn)擊播放按鈕時(shí)，如果音頻尚未播放（audioStatus === true），我們會(huì)調(diào)用 audio.play() 開(kāi)始播放音頻，同時(shí)啟動(dòng)倒計(jì)時(shí)。
如果音頻正在播放（audioStatus === false），則暫停音頻，并重置倒計(jì)時(shí)為初始狀態(tài)（4:31）。

倒計(jì)時(shí)更新：

function player() {
    let m = 4;
    let s = 31;
    times = setInterval(function() {
        if (s < 10) {
            $('#countdown').html(m + ':0' + s);
        } else {
            $('#countdown').html(m + ':' + s);
        }
        s--;
        if (s < 0) {
            s = 59;
            m--;
        }
    }, 1000);
}

我們使用 setInterval 每秒更新倒計(jì)時(shí)。初始時(shí)設(shè)定倒計(jì)時(shí)為 4 分 31 秒，并逐秒減少。
當(dāng)秒數(shù)小于 10 時(shí)，倒計(jì)時(shí)格式會(huì)是 4:09 這樣，而不是 4:9，確保時(shí)間格式一致。

播放結(jié)束后自動(dòng)暫停：

setTimeout(function() {
    audio.currentTime = 0;
    audio.pause();
    $('#countdown').html('4:31');
    audioStatus = true;
}, 271000);

setTimeout 在音頻播放完畢后會(huì)將音頻暫停，并重置倒計(jì)時(shí)顯示為初始狀態(tài)。

4. 總結(jié)：

這段代碼實(shí)現(xiàn)了一個(gè)基本的音頻播放器界面，并添加了自定義的倒計(jì)時(shí)功能。當(dāng)用戶點(diǎn)擊播放按鈕時(shí)，音頻將開(kāi)始播放，同時(shí)倒計(jì)時(shí)更新。通過(guò)清晰簡(jiǎn)潔的設(shè)計(jì)，用戶可以隨時(shí)了解音頻的播放進(jìn)度，并控制播放/暫停。這個(gè)小項(xiàng)目展示了如何使用 HTML、CSS 和 JavaScript 來(lái)實(shí)現(xiàn)一個(gè)自定義音頻控件，并提供了一些交互和視覺(jué)反饋。

這個(gè)功能可以在許多應(yīng)用場(chǎng)景中使用，如學(xué)習(xí)平臺(tái)、在線課程、音頻播客等，提升用戶的互動(dòng)體驗(yàn)。

完整代碼：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="http://www.yourdomain.com/js/jquery-3.7.1.min.js"></script>
		<style>
			/* 模擬audio標(biāo)簽的樣式 */
			.audioDiv {
				display: flex;
				align-items: center;
				width: 204px;
				height: 29px;
				background-color: #a0a0a0;
				border-radius: 9px;
				padding: 10px;
				cursor: pointer;
			}

			/* 播放按鈕 */
			#playButton img {
				width: 30px;
				height: 30px;
				cursor: pointer;
			}

			/* 時(shí)間顯示 */
			#countdown {
				margin-left: 10px;
				font-size: 14px;
				width: 45px;
			}

			/* 播放文本 */
			#bofang {
				font-size: 14px;
				color: #333;
				margin-left: 10px;
			}

			/* 控制器樣式 */
			#playButton:hover {
				opacity: 0.8;
			}
		</style>
	</head>
	<body>
		<div class="audioDiv" id="playButton">
			<img src="./img/yuyin.png" alt="播放圖標(biāo)" />
			<p id="countdown">4:31</p>
			<p id="bofang">播放錄音</p>
		</div>

		<script>
			let audio = new Audio('./img/道姑朋友.mp3');//音頻自己本地插入
			let audioStatus = true;
			let times;
            
            // 播放錄音功能
			$('#playButton').on('click', function() {
				if (audioStatus === true) {
					audio.play();
					player();
					audioStatus = false;
				} else {
					audio.currentTime = 0;
					audio.pause();
					clearInterval(times);
					$('#countdown').html('4:31');
					audioStatus = true;
				}

				setTimeout(function() {
					audio.currentTime = 0;
					audio.pause();
					$('#countdown').html('4:31');
					audioStatus = true;
				}, 271000); // 播放完后暫停（4分鐘31秒）
			});

			function player() {
				let m = 4;
				let s = 31;
				times = setInterval(function() {
					if (s < 10) {
						// 如果秒數(shù)少于10，在前面加上0
						$('#countdown').html(m + ':0' + s);
					} else {
						$('#countdown').html(m + ':' + s);
					}
					s--;
					if (s < 0) {
						// 如果秒數(shù)少于0，就變成59秒
						s = 59;
						m--;
					}
				}, 1000);
			}
		</script>
	</body>
</html>

總結(jié)

到此這篇關(guān)于利用JavaScript實(shí)現(xiàn)點(diǎn)擊音頻實(shí)現(xiàn)播放功能的文章就介紹到這了,更多相關(guān)js點(diǎn)擊音頻實(shí)現(xiàn)播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: