如何使用HTML、CSS和jQuery制作一个响应式的音频播放器

<div id="player-container">
    <audio id="audio-player" src="audio.mp3"></audio>
    <div id="controls">
        <button id="play-button">播放</button>
        <button id="pause-button">暂停</button>
        <input id="volume-slider" type="range" min="0" max="100" step="1" value="100" />
        <div id="progress-bar">
            <div id="progress"></div>
        </div>
    </div>
</div>

#player-container {
    width: 100%;
    padding: 10px;
    background-color: #f0f0f0;
    text-align: center;
}

#controls {
    margin-top: 10px;
}

button {
    margin: 0 5px;
}

input[type="range"] {
    width: 200px;
}

#progress-bar {
    width: 100%;
    height: 5px;
    background-color: #d0d0d0;
    margin-top: 10px;
}

#progress {
    height: 100%;
    background-color: #008080;
    width: 0%;
}

$(document).ready(function() {
    var audioPlayer = $("#audio-player")[0];
    var playButton = $("#play-button");
    var pauseButton = $("#pause-button");
    var volumeSlider = $("#volume-slider");
    var progressBar = $("#progress");

    playButton.on("click", function() {
        audioPlayer.play();
    });

    pauseButton.on("click", function() {
        audioPlayer.pause();
    });

    volumeSlider.on("input", function() {
        audioPlayer.volume = volumeSlider.val() / 100;
    });

    audioPlayer.addEventListener("timeupdate", function() {
        var progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
        progressBar.css("width", progress + "%");
    });
});