一个简易的网页音乐播放器

功能：播放，暂停，快进，后退，进度条拖动

使用：

1. 下载资源：player.css player.js
2. 在网页任意位置加入 <div class="audio-player"></div>
3. 在头部引入css，在末尾引入js

4. 编写js

   audio_source.src = 音频URL;
   audio_play();    // 开始播放

源码：
player.css

.audio-player {
    width: 300px;
    height: 65px;
    border: 1px solid black;
    overflow: hidden;
    white-space: nowrap;
    background: white;
}
#audio-avatar {
    height: auto;
    width: auto;
    max-height: 100%;
    margin-right: 10px;
    float: left;
}
.audio-info {
    overflow: hidden;
    position: relative;
}
#audio-title {
    display: inline-block;
    padding-left: 100%;
    animation: showFullTitle 10s linear infinite;
}
@keyframes showFullTitle {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}
.audio-progress {
    display: inline-block;
}
.audio-control {
    margin-right: 5px;
    float: right;
}

player.js

document.querySelector('.audio-player').innerHTML = `<svg id="audio-avatar" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    <path
        d="M391.424 938.688a48.896 48.896 0 0 1-49.92-49.728V212.928c0-24.832 18.304-44.8 41.6-49.728l497.344-77.888a49.984 49.984 0 0 1 39.936 11.648c11.648 9.92 16.64 23.168 16.64 38.08V812.8c0 28.16-21.632 49.664-49.92 49.664a48.896 48.896 0 0 1-49.92-49.728V193.024l-397.568 61.312v634.624c1.664 28.16-21.568 49.728-48.192 49.728z"
        fill="#172B4D"></path>
    <path
        d="M888.768 862.464H632.576a48.896 48.896 0 0 1-49.92-49.728v-142.464c0-28.16 21.696-49.728 49.92-49.728h256.192c28.288 0 49.92 21.504 49.92 49.728v142.464a51.072 51.072 0 0 1-49.92 49.728z m-206.272-99.456h156.352v-43.072h-156.352v43.072zM391.424 938.688H135.232a48.896 48.896 0 0 1-49.92-49.728v-142.464c0-28.16 21.632-49.728 49.92-49.728h256.192c28.288 0 49.92 21.504 49.92 49.728v142.464a49.92 49.92 0 0 1-49.92 49.728z m-206.272-99.456h156.352v-43.072H185.152v43.072z"
        fill="#172B4D"></path>
</svg>
<div class="audio">
    <div class="audio-info">
        <audio id="audio-source" src type="audio/mpeg"></audio>
        <span id="audio-title">No Audio To Play</span><br>
    </div>
    <div class="audio-progress">
        <input type="range" id="audio-range" min="0" max="100" value="0"
            step="0.01">
        <label id="audio-time" for="audio-range">0:00 / 0:00</label>
    </div>
    <div class="audio-control">
        <button onclick="audio_back5s()">-5s</button>
        <button onclick="audio_play()">Play</button>
        <button onclick="audio_stop()">Stop</button>
        <button onclick="audio_forward5s()">+5s</button>
    </div>
</div>`;

const audio_source = document.getElementById('audio-source');
const audio_title = document.getElementById("audio-title");
let current_audio_title = "";
const audio_range = document.getElementById("audio-range");
const audio_time = document.getElementById("audio-time");
let audio_end_time_length = 0;

function audio_play() {
    if (audio_source.paused) {
        const new_audio_title = decodeURI(audio_source.src.split('/').pop().split('.').shift());
        if (current_audio_title != new_audio_title) {
            audio_title.textContent = new_audio_title;
            current_audio_title = audio_title.textContent;
            audio_source.load();
        }
        audio_source.play();
    }
}
function audio_stop() {
    if (!audio_source.paused) {
        audio_source.pause();
    }
}
function audio_back5s() {
    audio_play();
    audio_source.currentTime -= 5;
}
function audio_forward5s() {
    audio_play();
    audio_source.currentTime += 5;
}

function audio_current_time() {
    const audio_currentTime = audio_source.currentTime;
    const audio_time_minutes = Math.floor(audio_currentTime / 60).toString();
    const audio_time_seconds = Math.floor(audio_currentTime % 60).toString().padStart(2, '0');
    const audio_end_time = audio_time.textContent.slice(0-audio_end_time_length);
    return `${audio_time_minutes}:${audio_time_seconds}` + " / " + audio_end_time;
}
audio_source.onloadedmetadata = function() {
    const audio_duration = audio_source.duration;
    audio_range.max = audio_duration;
    const audio_time_minutes = Math.floor(audio_duration / 60).toString();
    const audio_time_seconds = Math.floor(audio_duration % 60).toString().padStart(2, '0');
    audio_end_time_length = audio_time_minutes.length + audio_time_seconds.length + 1;
    audio_time.textContent = "0:00 / " + `${audio_time_minutes}:${audio_time_seconds}`;
}
audio_source.ontimeupdate = function() {
    audio_range.value = audio_source.currentTime;
    audio_time.textContent = audio_current_time();
}
audio_range.oninput = function() {
    audio_play();
    audio_source.currentTime = audio_range.value;
    audio_time.textContent = audio_current_time();
}

demo：https://runoneall.serv00.net/WebLitePlayer/