css3 重合部分隐藏,css3 重复样式提取,css3 cur指针不显示,CSS3常见布局形式有哪些,CSS3菜单缩放,CSS3创建动画特效
CSS3听觉（Audio CSS）是一种使用CSS样式表来控制HTML5音频元素的技术。它允许开发人员在不使用JavaScript的情况下，通过CSS样式表控制音频的播放、暂停、重复等属性。

以下是一个简单的例子，展示如何使用CSS3听觉控制音频元素的外观和行为：

html
<audio src="song.mp3" class="music"></audio>
<button class="play">播放</button>
<button class="pause">暂停</button>

<style>
.music {
width: 200px;
height: 20px;
background-color: #eee;
border-radius: 10px;
padding: 2px;
}
.music::-webkit-media-controls-play-button,
.music::-webkit-media-controls-pause-button,
.music::-webkit-media-controls-volume-slider {
display: none !important;
}
.play {
font-size: 16px;
}
.pause {
font-size: 16px;
}
.music:active + .play,
.music.ended + .play,
.music.paused + .play {
display:none;
}
.music:active + .pause,
.music.ended + .pause,
.music.playing + .pause {
display:none;
}
.play:hover,
.pause:hover {
cursor:pointer;
}
</style>

<script>
var audio = document.querySelector('.music');
var playBtn = document.querySelector('.play');
var pauseBtn = document.querySelector('.pause');

playBtn.addEventListener('click', function() {
audio.play();
audio.classList.add('playing');
audio.classList.remove('paused');
});

pauseBtn.addEventListener('click', function() {
audio.pause();
audio.classList.add('paused');
audio.classList.remove('playing');
});

audio.addEventListener('ended', function() {
audio.classList.add('ended');
audio.classList.remove('playing');
});
</script>


上述代码中，使用<audio>元素嵌入了音频文件，并使用CSS样式表来控制它的外观，包括宽度、高度、背景颜色等。使用特定的CSS选择器，隐藏了浏览器默认的播放、暂停和音量控件，然后定制自定义的“播放”和“暂停”按钮。最后，使用JavaScript为这两个按钮添加了点击事件，以控制音频的播放和暂停，并在音频结束时添加了一个类名以表示已结束。