在HTML中，我们可以使用<audio>标签来嵌入音频文件，以下是如何在HTML中设置音频的详细步骤：
（图片来源网络，侵删）
1、我们需要在HTML文件中引入一个音频文件，这可以通过<source>标签来实现。<source>标签的src属性用于指定音频文件的路径，type属性用于指定音频文件的格式，我们可以这样引入一个MP3格式的音频文件：
<audio controls> <source src="example.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放。 </audio>
2、controls属性用于显示音频控制器，包括播放/暂停按钮、音量控制等，如果不需要显示控制器，可以省略这个属性。
3、如果浏览器不支持指定的音频格式，可以在<audio>标签内部添加一个文本提示，告诉用户浏览器不支持音频播放。
<audio controls> <source src="example.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放。 </audio>
4、除了<source>标签之外，我们还可以使用<track>标签来添加多个音轨。<track>标签的src属性用于指定音轨文件的路径，kind属性用于指定音轨的类型（如"subtitles"表示字幕），我们可以这样添加一个英文字幕音轨：
<p>点击下面的链接来播放视频并查看英文字幕：</p> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <track src="captions_en.vtt" kind="subtitles" srclang="en" label="English"> 您的浏览器不支持视频播放。 </video>
5、如果需要隐藏控制器，可以使用CSS样式来实现，我们可以将控制器设置为不可见：
<style>
audio::webkitmediacontrolspanel {
display: none;
}
</style>
<audio controls>
<source src="example.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
6、如果需要自定义控制器的样式，可以使用JavaScript和CSS来实现，我们可以创建一个自定义的控制器容器，并将默认的控制器替换为自定义的控制器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>自定义音频控制器</title>
<style>
#customcontroller {
display: flex;
justifycontent: spacebetween;
alignitems: center;
width: 300px;
backgroundcolor: #f1f1f1;
padding: 10px;
borderradius: 5px;
}
#customcontroller button {
backgroundcolor: transparent;
border: none;
fontsize: 24px;
cursor: pointer;
}
#customcontroller button:hover {
color: #ff0000;
}
</style>
</head>
<body>
<audio id="myAudio">
<source src="example.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
<div id="customcontroller">
<button id="playPause">▶️</button>
<input id="volume" type="range" min="0" max="1" step="0.1">
<button id="mute">🔇</button>
</div>
<script>
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('playPause');
const volumeSlider = document.getElementById('volume');
const muteBtn = document.getElementById('mute');
let isPlaying = false;
let volume = 1;
let muted = false;
playPauseBtn.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
playPauseBtn.textContent = '▶️';
} else {
audio.play();
playPauseBtn.textContent = '⏸️';
}
isPlaying = !isPlaying;
});
volumeSlider.addEventListener('input', () => {
audio.volume = volumeSlider.value;
});
muteBtn.addEventListener('click', () => {
if (muted) {
audio.muted = false;
muteBtn.textContent = '🔇';
} else {
audio.muted = true;
muteBtn.textContent = '🔈';
}
muted = !muted;
});
audio.addEventListener('timeupdate', () => {
if (!isPlaying) return;
const progress = audio.currentTime / audio.duration * 100;
volumeSlider.value = progress; // update volume slider position based on current time and duration of the audio file (optional)
});
audio.addEventListener('ended', () => { // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ends (you can implement this using JavaScript)}); // optional: autoplay next track or loop the current one when it ended); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends); // optional: autoplay next track or loop the current one when it ends
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/368969.html
