如何用Cargo自带音频播放器加载Google Drive音频并优化样式？

我在Cargo平台搭建网站，平台自带音频播放器（对应CSS代码如下），但平台仅提供100MB媒体存储空间，官方说明扩容只能用FTP服务器，Dropbox这类工具无法替代，试了数小时没找到可行方案。

我知道可以用HTML5原生audio播放器加载Google Drive上的音频，这个方法可行，但没法给它设置样式。参考过相关内容后，还是调不出想要的效果：透明背景、黑色边框、播放按钮直角样式。

想请教两个问题：

• 有没有办法让Cargo自带的播放器加载Google Drive里的音频文件？
• 如果只能用HTML5 audio播放器，怎么写出对应的CSS实现我要的样式？

我不是程序员，但熟悉在Cargo的CSS编辑器里操作，这是我搭建网站的主要方式。

来自西班牙的问候

/* Audio Player */

.audio-player {
    max-width: 100%;
    height: 3.3rem;
    outline: 1px solid rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.6);
    background: transparent;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: "Eurostile", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0, 0, 0, 0.25);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.05);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

一、Cargo自带播放器加载Google Drive音频的可行性 #

Cargo自带播放器仅支持读取平台内部存储或绑定FTP的文件，无法直接加载Google Drive音频。原因是Google Drive的文件链接需要权限验证，并非直接的流媒体地址，且Cargo播放器没有集成第三方云存储的适配逻辑，官方仅支持FTP扩容，所以这个方法不可行。

二、HTML5 Audio播放器自定义样式实现 #

如果用原生HTML5 <audio> 标签，需隐藏原生控件，用自定义元素模拟播放器，再通过CSS控制样式，以下是适配Cargo编辑器的步骤：

1. 添加自定义HTML结构（在Cargo的HTML模块中插入） #

<div class="custom-audio-player">
  <button class="play-btn"></button>
  <div class="progress-container">
    <div class="buffer"></div>
    <div class="progress"></div>
  </div>
  <span class="time current">0:00</span>
  <span class="time total">0:00</span>
  <audio src="你的Google Drive音频直链"></audio>
</div>

注：Google Drive音频需设置为“公开分享”，并将链接中的open?id=XXX替换为uc?export=download&id=XXX，获取可直接流媒体播放的直链。

2. 添加CSS样式（在Cargo的CSS编辑器中插入） #

/* 隐藏原生audio控件 */
.custom-audio-player audio {
  display: none;
}

/* 自定义播放器容器 */
.custom-audio-player {
  width: 100%;
  height: 3.3rem;
  border: 1px solid #000; /* 黑色边框 */
  background: transparent; /* 透明背景 */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  font-family: "Eurostile", sans-serif;
  font-size: 1.2rem;
}

/* 播放按钮（直角样式） */
.play-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid #000;
  background: transparent;
  position: relative;
  cursor: pointer;
  padding: 0;
}

/* 播放状态图标 */
.play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 1rem solid #000;
}

/* 暂停状态图标 */
.play-btn.paused::before {
  border-left: none;
  width: 0.4rem;
  height: 1.2rem;
  background: #000;
  box-shadow: 0.6rem 0 0 #000;
}

/* 进度条容器 */
.progress-container {
  flex: 1;
  height: 0.5rem;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

/* 缓冲进度 */
.buffer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(0,0,0,0.1);
  width: 0;
}

/* 播放进度 */
.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(0,0,0,0.3);
  width: 0;
}

/* 时间显示 */
.time {
  color: #000;
}

3. 添加JS控制逻辑（在Cargo的JS编辑器中插入） #

document.querySelectorAll('.custom-audio-player').forEach(player => {
  const playBtn = player.querySelector('.play-btn');
  const audio = player.querySelector('audio');
  const progress = player.querySelector('.progress');
  const buffer = player.querySelector('.buffer');
  const currentTimeEl = player.querySelector('.current');
  const totalTimeEl = player.querySelector('.total');

  // 播放/暂停切换
  playBtn.addEventListener('click', () => {
    if (audio.paused) {
      audio.play();
      playBtn.classList.add('paused');
    } else {
      audio.pause();
      playBtn.classList.remove('paused');
    }
  });

  // 更新总时长
  audio.addEventListener('loadedmetadata', () => {
    totalTimeEl.textContent = formatTime(audio.duration);
  });

  // 更新播放进度
  audio.addEventListener('timeupdate', () => {
    const progressPercent = (audio.currentTime / audio.duration) * 100;
    progress.style.width = `${progressPercent}%`;
    currentTimeEl.textContent = formatTime(audio.currentTime);
  });

  // 更新缓冲进度
  audio.addEventListener('progress', () => {
    if (audio.buffered.length > 0) {
      const bufferEnd = audio.buffered.end(audio.buffered.length - 1);
      const bufferPercent = (bufferEnd / audio.duration) * 100;
      buffer.style.width = `${bufferPercent}%`;
    }
  });

  // 时间格式化函数
  function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }
});

内容的提问来源于stack exchange，提问作者miguelangelcm