Javascript 从 Google 驱动器获取 mp3 文件持续时间

Question

我从 Youtube 视频中获取了一段代码，该视频为您的网站实现了音乐播放器。这是一个简单的，我不太擅长 JS，所以我只是使用它。但是，原始代码使用本地存储中的 mp3 文件，但我需要它们来自 Google 驱动器。所以我将代码更改为我需要的代码并且播放器可以正常工作。但是，音乐队列没有。

控制台报错；

script.js:191 未捕获的 DOMException：无法在 'Element' 上执行 'querySelector'：'#https://drive.google.com/uc?export=view&id=1xx-XXXXXXXXXXXXXXXXXXXX' 不是有效的选择器。在 file:///D:/My%20Files/My%20Portfolio/js/script.js:191:34

注意：为了隐私我隐藏了文件的id :pp

代码的作用是；它将一组歌曲详细信息插入到 HTML.

中的 ul 标记中

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

for (let i = 0; i < allMusic.length; i++) {
  
  console.log("traversing array of music at index: " + i);
  let liTag = `<li li-index="${i + 1}">
                <div class="row">
                  <span>${allMusic[i].name}</span>
                  <p>${allMusic[i].artist}</p>
                </div>
                <span id="${allMusic[i].src}" class="audio-duration">3:40</span>
                <audio class="${allMusic[i].src}" src="${allMusic[i].src}"></audio>
              </li>`;
  ulTag.insertAdjacentHTML("beforeend", liTag); //inserting the li inside ul tag

  let liAudioDuartionTag = ulTag.querySelector(`#${allMusic[i].src}`); //ERROR IS HERE!
  let liAudioTag = ulTag.querySelector(`.${allMusic[i].src}`);
  liAudioTag.addEventListener("loadeddata", ()=>{
    let duration = liAudioTag.duration;
    let totalMin = Math.floor(duration / 60);
    let totalSec = Math.floor(duration % 60);
    if(totalSec < 10){ //if sec is less than 10 then add 0 before it
      totalSec = `0${totalSec}`;
    };
    liAudioDuartionTag.innerText = `${totalMin}:${totalSec}`; //passing total duation of song
    liAudioDuartionTag.setAttribute("t-duration", `${totalMin}:${totalSec}`); //adding t-duration attribute with total duration value
  });
}

音乐详细信息如何存储在数组中；

let allMusic = [
    {
        name: "John Doe - Rock n Roll",
        artist: "Tesla",
        img: "https://i.ytimg.com/vi/xxxxxxxxxxx/hqdefault.jpg",
        src: "https://drive.google.com/uc?export=view&id=1xx-XXXXXXXXXXXXXXXXXXXXX"
    },
];

我不太了解查询选择器，我阅读了文档页面但找不到任何解决方案。也许 Javascript 以某种方式弄乱了选择器中的链接，但我也无法绕过它。

欢迎任何想法，并提前致谢...

Answer 1

好了，问题解决了。该代码试图在 HTML 代码中找到一个元素，现在我理解了查询选择器，它正在创建 ul 列表项，其 ID 为 google 驱动器 link，然后由于某种原因（可能是转义），无法选择 id。

我在音乐列表数组中添加了一个额外的属性，并插入了具有这些 ID 的列表元素，现在可以使用查询选择器选择这些元素，现在可以使用了。

Javascript 从 Google 驱动器获取 mp3 文件持续时间

Javascript get mp3 file duration from Google Drive

javascript

duration

queryselector