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

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

這篇文章主要介紹了關于如何利用JavaScript實現(xiàn)點擊音頻實現(xiàn)播放功能,文中通過示例講解了使用HTML、CSS和JavaScript結合jQuery實現(xiàn)一個簡易音頻播放器,包含播放、暫停及倒計時功能,適用于學習平臺等場景,需要的朋友可以參考下

前言

今天通過 HTML、CSS 和 JavaScript 模擬一個簡易的音頻播放器。它使用了基本的音頻控制邏輯，并結合 jQuery 來管理用戶的交互。讓我們來詳細解讀這段代碼。

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

首先，我們的 HTML 結構非常簡單，它包含一個帶有播放按鈕和時間顯示的 <div> 元素。

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

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

2. CSS 部分：樣式設置

CSS 主要負責設置播放器的外觀和布局。通過以下樣式，確保了播放器的基本功能和用戶體驗：

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

display: flex 讓內部元素（圖標、倒計時和文本）水平排列并居中。
background-color: #a0a0a0 設置播放器背景色為灰色，給人簡潔的視覺效果。
border-radius: 9px 使播放器的邊緣呈圓角。

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

3. JavaScript 部分：音頻控制

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

播放和暫停音頻：

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

倒計時更新：

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 每秒更新倒計時。初始時設定倒計時為 4 分 31 秒，并逐秒減少。
當秒數(shù)小于 10 時，倒計時格式會是 4:09 這樣，而不是 4:9，確保時間格式一致。

播放結束后自動暫停：

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

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

4. 總結：

這段代碼實現(xiàn)了一個基本的音頻播放器界面，并添加了自定義的倒計時功能。當用戶點擊播放按鈕時，音頻將開始播放，同時倒計時更新。通過清晰簡潔的設計，用戶可以隨時了解音頻的播放進度，并控制播放/暫停。這個小項目展示了如何使用 HTML、CSS 和 JavaScript 來實現(xià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標簽的樣式 */
			.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;
			}

			/* 時間顯示 */
			#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="播放圖標" />
			<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>