JS音乐播放器使用Google Drive MP3资源队列失效问题求解

你将完整的Google Drive资源URL直接作为元素的id和class属性值，URL中包含的:、/、?、&、=等都是CSS选择器的保留特殊字符，直接拼接进querySelector的参数时会触发选择器语法错误，这就是报错的根本原因。

最优方案是调整id和class的命名规则，避免使用带特殊字符的URL作为属性值，改用循环索引生成唯一合法标识，修改后的代码如下：

const ulTag = wrapper.querySelector("ul");

for (let i = 0; i < allMusic.length; i++) {
  console.log("traversing array of music at index: " + i);
  // 改用索引生成唯一id和class，避免特殊字符问题
  let liTag = `<li li-index="${i + 1}">
                <div class="row">
                  <span>${allMusic[i].name}</span>
                  <p>${allMusic[i].artist}</p>
                </div>
                <span id="duration-${i}" class="audio-duration">3:40</span>
                <audio class="audio-${i}" src="${allMusic[i].src}"></audio>
              </li>`;
  ulTag.insertAdjacentHTML("beforeend", liTag);

  // 直接匹配索引生成的选择器，无语法问题
  let liAudioDuartionTag = ulTag.querySelector(`#duration-${i}`);
  let liAudioTag = ulTag.querySelector(`.audio-${i}`);
  liAudioTag.addEventListener("loadeddata", ()=>{
    let duration = liAudioTag.duration;
    let totalMin = Math.floor(duration / 60);
    let totalSec = Math.floor(duration % 60);
    if(totalSec < 10){
      totalSec = `0${totalSec}`;
    };
    liAudioDuartionTag.innerText = `${totalMin}:${totalSec}`;
    liAudioDuartionTag.setAttribute("t-duration", `${totalMin}:${totalSec}`);
  });
}

如果你不想修改原有属性命名逻辑，也可以使用属性选择器+引号包裹值的方式兼容处理，仅修改报错行即可：

// 用属性选择器明确匹配id的完整值，特殊字符会被当做普通字符串处理
let liAudioDuartionTag = ulTag.querySelector(`[id="${allMusic[i].src}"]`);
let liAudioTag = ulTag.querySelector(`[class="${allMusic[i].src}"]`);

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