Javascript 从 Google Drive 获取 mp3 文件的持续时间答案

【问题标题】：Javascript get mp3 file duration from Google DriveJavascript 从 Google Drive 获取 mp3 文件的持续时间
【发布时间】：2021-11-01 18:43:22
【问题描述】：

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

控制台报此错误；

script.js:191 未捕获的 DOMException：无法在“元素”上执行“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 会以某种方式与选择器中的链接混淆，但我也无法绕过它。

欢迎提出任何想法，并在此先感谢...

【问题讨论】：

将 # 更改为 . 如下： ulTag.querySelector(.${allMusic[i].src});
刚刚尝试过同样的错误....
也许额外的信息会有所帮助。相同的代码适用于没有任何链接的本地存储，但仅适用于“music-1”、“music-2”等名称......

标签： javascript duration queryselector

【解决方案1】：

好了，问题现在解决了。该代码试图在 HTML 代码中找到一个元素，现在我了解了查询选择器，它正在创建带有 google drive 链接 id 的 ul 列表项，然后由于某种原因（可能转义），id 不能被选中。

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

【讨论】：