导入lottie-web开发自定义音频播放器遇CORS及语法错误求助

1. 本地用file://协议打开文件时，添加type="module"触发CORS拦截，不添加则出现import语法错误
2. Codepen环境下lottie动画无法运行
3. 需要实现：lottie驱动的播放/静音图标动画切换、进度条及音量条功能

一、解决本地CORS与模块语法问题 #

本地file://协议不支持ES模块的加载规则，必须用HTTP服务器环境运行代码：

• Python 3：在项目根目录执行命令启动本地服务器

  python -m http.server 8000
  

  然后在浏览器访问 http://localhost:8000
• Node.js：先全局安装http-server工具，再启动服务器

  npm install -g http-server
  http-server
  

  默认访问 http://localhost:8080

如果不想用ES模块，可改用CDN引入依赖：
在HTML的<head>中添加lottie-web的CDN脚本，去掉JS里的import语句，直接使用全局lottie变量：

<script src="https://unpkg.com/lottie-web@5/build/player/lottie.min.js"></script>

二、修复Codepen中lottie动画不运行问题 #

1. 检查动画容器选择器是否正确，确保lottie.loadAnimation的container参数指向正确的DOM元素
2. 确认lottie动画JSON文件的路径：在Codepen中可将JSON文件上传到Assets面板，然后使用相对路径或者Codepen提供的Assets URL
3. 检查动画控制逻辑：播放/静音按钮点击时，调用lottie的API切换动画状态，例如：

   // 播放动画切换
   playBtn.addEventListener('click', () => {
     if(audio.paused) {
       lottie.play();
       audio.play();
     } else {
       lottie.pause();
       audio.pause();
     }
   });
   

三、实现进度条与音量条功能 #

进度条 #

• 监听音频的timeupdate事件，实时更新进度条的视觉状态：

  audio.addEventListener('timeupdate', () => {
    const progress = (audio.currentTime / audio.duration) * 100;
    progressBar.style.width = `${progress}%`;
  });
  

• 点击进度条跳转播放位置：

  progressContainer.addEventListener('click', (e) => {
    const rect = progressContainer.getBoundingClientRect();
    const pos = (e.clientX - rect.left) / rect.width;
    audio.currentTime = pos * audio.duration;
  });
  

音量条 #

• 监听音量条的input事件，同步音频音量：

  volumeSlider.addEventListener('input', (e) => {
    audio.volume = e.target.value;
    // 同步静音动画逻辑
    if(audio.volume === 0) {
      lottie.loadAnimation(muteAnimationOptions);
    } else {
      lottie.loadAnimation(volumeAnimationOptions);
    }
  });
  

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