使用html audio面向对象方式播放音频简单示例
html代码示例
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频播放器</title>
<style>
.audio-player {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background: #f5f5f5;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.dark-mode {
background: #2c3e50;
color: white;
}
.cover-container {
position: relative;
width: 100%;
height: 250px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 15px;
}
.cover {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease;
position: absolute;
top: 0;
left: 0;
}
.cover.active {
opacity: 1;
}
.controls {
display: flex;
flex-direction: column;
gap: 12px;
}
.progress-container {
height: 4px;
background: #ddd;
border-radius: 2px;
cursor: pointer;
}
.progress-bar {
height: 100%;
background: #42b983;
border-radius: 2px;
transition: width 0.1s linear;
}
.time-display {
display: flex;
justify-content: space-between;
font-size: 0.9em;
color: #666;
gap: 1rem;
}
.dark-mode .time-display {
color: #ccc;
}
button {
background: #42b983;
border: none;
color: white;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: opacity 0.2s;
}
button:hover {
opacity: 0.9;
}
.bottom-container {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
input[type="range"] {
width: 100px;
height: 4px;
-webkit-appearance: none;
background: #ddd;
border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: #42b983;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="audio-player">
<div class="cover-container" id="coverContainer"></div>
<div class="controls">
<div style="display: flex;align-items: center;justify-content: space-between;gap: 8px;">
<span id="currentTime">0:00</span>
<div class="progress-container" id="progressContainer" style="flex: 1">
<div class="progress-bar" id="progressBar"></div>
</div>
<span id="duration">0:00</span>
</div>
<div class="bottom-container">
<button id="playBtn">播放</button>
<div style="display: flex;align-items: center;gap: 0.5rem">
<button id="muteBtn">静音</button>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.6">
</div>
</div>
</div>
</div>
<script>
class AudioPlayer {
constructor(options) {
this.audio = new Audio();
this.covers = options.covers || [];
this.currentCoverIndex = 0;
this.isPlaying = false;
this.isMuted = false;
this.volume = 1;
this.initPlayer(options.src);
this.initCoverRotation();
this.setupEventListeners();
}
initPlayer(src) {
this.audio.src = src;
// 音量
this.audio.volume = this.volume;
// 音频的元数据已经加载完毕
this.audio.addEventListener('loadedmetadata', () => {
document.getElementById('duration').textContent =
this.formatTime(this.audio.duration);
});
this.audio.addEventListener('timeupdate', () => {
this.updateProgress();
});
}
initCoverRotation() {
const container = document.getElementById('coverContainer');
this.covers.forEach((src, index) => {
const img = new Image();
img.src = src;
img.className = 'cover' + (index === 0 ? ' active' : '');
container.appendChild(img);
});
setInterval(() => {
this.currentCoverIndex =
(this.currentCoverIndex + 1) % this.covers.length;
this.updateCover();
}, 5000);
}
updateCover() {
const covers = document.querySelectorAll('.cover');
covers.forEach((cover, index) => {
cover.classList.toggle('active', index === this.currentCoverIndex);
});
}
setupEventListeners() {
// 播放/暂停按钮
document.getElementById('playBtn').addEventListener('click', () => {
this.togglePlay();
});
// 播放进度条点击
document.getElementById('progressContainer').addEventListener('click', (e) => {
const rect = e.target.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
this.audio.currentTime = percent * this.audio.duration;
});
// 音量控制
document.getElementById('volumeSlider').addEventListener('input', (e) => {
this.volume = e.target.value;
this.audio.volume = this.volume;
this.isMuted = this.volume === 0;
this.updateMuteButton();
});
// 静音按钮
document.getElementById('muteBtn').addEventListener('click', () => {
this.isMuted = !this.isMuted;
this.audio.muted = this.isMuted;
this.updateMuteButton();
});
}
togglePlay() {
this.isPlaying ? this.audio.pause() : this.audio.play();
this.isPlaying = !this.isPlaying;
document.getElementById('playBtn').textContent =
this.isPlaying ? '暂停' : '播放';
}
updateProgress() {
const progress = (this.audio.currentTime / this.audio.duration) * 100;
document.getElementById('progressBar').style.width = progress + '%';
document.getElementById('currentTime').textContent =
this.formatTime(this.audio.currentTime);
}
updateMuteButton() {
document.getElementById('muteBtn').textContent =
this.isMuted ? '取消静音' : '静音';
}
formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
}
// 使用示例
const player = new AudioPlayer({
src: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3',
covers: [
'https://qnyoss.driedrice.top/Snipaste_2025-04-11_19-45-41.png',
'https://qnyoss.driedrice.top/2025/04/17/1744852582450_28x28.png',
]
});
// 切换暗黑模式（可选）
document.querySelector('.audio-player').classList.add('dark-mode');
</script>
</body>
</html>js Audio类型介绍
JavaScript中的Audio对象是HTML5中引入的一个非常有用的API，它允许开发者在网页中嵌入和控制音频播放。Audio对象可以通过创建一个新的实例来使用，或者通过获取页面上已有的<audio>元素的引用进行操作。
创建和初始化
要创建一个Audio对象，你可以直接使用new Audio()构造函数，并可选地传入音频文件的URL作为参数：
javascript
var audio = new Audio('path/to/audio/file.mp3');这将创建一个新的Audio对象并开始下载指定的音频文件。一旦下载完成，你就可以调用其方法来控制播放了。
主要属性
Audio对象包含多个属性，这些属性可以用来获取或设置音频的状态和行为：
src: 获取或设置音频文件的路径。currentTime: 获取或设置当前播放的时间点（以秒为单位）。duration: 只读，返回音频的总时长（以秒为单位）。paused: 返回一个布尔值，表示音频是否处于暂停状态。muted: 获取或设置音量静音状态。volume: 获取或设置音量大小（0.0到1.0之间）。playbackRate: 获取或设置播放速度，默认值为1.0。
常用方法
Audio对象提供了几个主要的方法来控制音频的播放：
play(): 开始播放音频。pause(): 暂停当前正在播放的音频。load(): 重新加载音频元素，通常用于动态改变音频源后重置播放器状态。canPlayType(type): 检查浏览器是否支持指定类型的音频格式。
事件监听
Audio对象还允许你监听一系列事件，以便于响应不同的播放状态变化：
loadedmetadata: 当元数据（如时长、尺寸等）加载完成后触发。canplay: 当浏览器估计它可以开始播放音频但可能需要暂停进行缓冲时触发。canplaythrough: 当浏览器估计它可以不间断地播放整个音频资源时触发。playing: 当音频开始播放或从等待状态恢复播放时触发。ended: 当音频播放结束时触发。timeupdate: 当当前播放时间更新时触发。
实际应用示例
以下是一个简单的例子，展示了如何使用Audio对象来播放一段背景音乐，并提供了一个按钮来控制播放/暂停：
html
<button id="toggleMusic">播放音乐</button>
<script>
var audio = new Audio('background_music.mp3');
document.getElementById('toggleMusic').addEventListener('click', function() {
if (audio.paused) {
audio.play();
this.textContent = '暂停音乐';
} else {
audio.pause();
this.textContent = '播放音乐';
}
});
</script>在这个例子中，我们首先创建了一个新的Audio实例，并设置了背景音乐的路径。然后，我们添加了一个点击事件监听器到按钮上，当用户点击按钮时，根据当前的播放状态来决定是播放还是暂停音乐，并相应地更新按钮的文字。
此外，Web Audio API提供了更高级的功能，比如处理音频数据流、应用音频效果（例如混响、均衡器）、分析音频频率等。对于那些需要复杂音频处理的应用程序来说，结合使用Audio对象与Web Audio API可能会更加合适。
总之，Audio对象为网页开发提供了一个简单而强大的方式来嵌入和控制音频播放，无论是简单的背景音乐还是复杂的交互式音频体验，都可以通过它来实现。
html audio标签介绍
HTML5中的<audio>标签是一个非常有用的元素，它允许你在网页中嵌入音频内容，并通过JavaScript进行控制。以下是关于<audio>标签的详细讲解，包括其基本用法、属性、方法和事件。
基本用法
最简单的使用方式如下：
html
<audio src="audio-file.mp3" controls></audio>在这个例子中，src属性指定了音频文件的位置，而controls属性则指示浏览器显示播放控件（如播放、暂停按钮等）。
属性
<audio>标签支持多个属性来定制音频播放的行为：
- src: 指定音频文件的路径。
- controls: 显示播放控件。
- autoplay: 页面加载后自动开始播放音频（许多现代浏览器限制了自动播放功能，需要用户交互才能触发）。
- loop: 音频播放完毕后重新开始播放。
- muted: 初始化时将音频静音。
- preload: 提示浏览器如何预加载音频文件：
none: 不预加载音频。metadata: 只预加载音频的元数据。auto: 浏览器选择最佳方式预加载音频。
- crossorigin: 设置跨域资源共享(CORS)策略。
方法
虽然<audio>标签本身没有直接的方法，但你可以通过JavaScript访问其对应的HTMLAudioElement对象，并调用以下方法：
- play(): 开始或继续播放音频。
- pause(): 暂停当前正在播放的音频。
- load(): 重新加载音频元素并重置其状态。
事件
你还可以监听一系列事件来响应音频播放的不同阶段：
- loadstart: 当浏览器开始请求音频资源时触发。
- durationchange: 当音频的总时长发生变化时触发。
- loadeddata: 当浏览器已加载当前播放位置的音频数据时触发。
- progress: 当浏览器正在下载音频资源时周期性地触发。
- canplay: 当浏览器估计它可以开始播放音频但可能需要暂停进行缓冲时触发。
- canplaythrough: 当浏览器估计它可以不间断地播放整个音频资源时触发。
- playing: 当音频开始播放或从等待状态恢复播放时触发。
- pause: 当音频暂停时触发。
- play: 当音频开始播放时触发。
- ratechange: 当音频的播放速度改变时触发。
- seeking: 当用户开始快进或快退时触发。
- seeked: 当用户完成快进或快退时触发。
- timeupdate: 当当前播放时间更新时触发。
- ended: 当音频播放结束时触发。
- volumechange: 当音量改变或静音状态改变时触发。
使用JavaScript控制
可以通过JavaScript动态创建和控制<audio>元素：
javascript
var audio = document.createElement('audio');
audio.src = 'path/to/audio/file.mp3';
audio.controls = true;
document.body.appendChild(audio);
// 控制播放
audio.play();
// 监听播放结束事件
audio.addEventListener('ended', function() {
console.log('音频播放结束');
});这个例子展示了如何动态创建一个音频元素，并添加到文档中，以及如何使用JavaScript来控制播放和监听事件。
综上所述，<audio>标签结合JavaScript提供了强大的音频播放控制能力，使得开发者能够轻松地在网页中嵌入音频，并根据需要自定义播放体验。