问题

我遇到了这个错误 'Uncaught TypeError: Cannot read properties of undefined (reading 'contains') at HTMLElement'...我卡住了...请帮忙

我一直在尝试编写代码以使歌曲播放，但是我卡住了，如果有人可以帮助我编写代码，我会很高兴。

我的HTML:

<div class="player">
    <div class="cover"></div>
    <nav>
        <div class="left">
            <i class="fa fa-bars"></i>
        </div>
        <div class="right">
            <i class="fa fa-search"></i>
            <i class="material-icons">queue_music</i>
        </div>
    </nav>
    <div class="player-ui">
        <div class="title">
            <h3>Hello</h3>
        </div>
        <div class="small">
            <i class="fa fa-refresh repeat"></i>
            <p>Adele</p>
            <i class="fa fa-volume-up volume"></i>
        </div>
        <div class="progress">
            <div class="played">
                <div class="circle"></div>
            </div>
        </div>
        <div class="controls">
            <i class="fa fa-backward prev"></i>
            <i class="fa fa-play play"></i>
            <i class="fa fa-forward next"></i>
        </div>
        <audio controls class="audio">
            <source src="music/Ace of Base - All That She Wants.mp3" type="audio/mpeg">
        </audio>
    </div>
</div>

声明:

const pauseIconClassName = 'fa-pause';
const playIconClassName = 'fa-play';
const equalizerIconClassName = 'material-icons';

const musicPlayer = document.querySelectorAll('.player');
const playBtn = document.querySelectorAll('.play');

const audio = document.querySelectorAll('.audio');

函数:

playBtn.forEach((playBtn) => {

    playBtn.addEventListener('click', () => {
        const isPlaying = musicPlayer.classList.contains('play');

        if (isPlaying) {
            pauseSong();
        } else {
            playSong();
        }

    });
});

英文:

i am getting this error 'Uncaught TypeError: Cannot read properties of undefined (reading 'contains') at HTMLElement'....i am stack on this...please help

i have been trying to code so that i could make the songs play but am stack, if any can help with the code i will be glad.

My Html:

&lt;div class=&quot;player&quot;&gt;
&lt;div class=&quot;cover&quot;&gt;&lt;/div&gt;
&lt;nav&gt;
	&lt;div class=&quot;left&quot;&gt;
		&lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;
	&lt;/div&gt;
	&lt;div class=&quot;right&quot;&gt;
		&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;
		&lt;i class=&quot;material-icons&quot;&gt;queue_music&lt;/i&gt;
	&lt;/div&gt;
&lt;/nav&gt;
&lt;div class=&quot;player-ui&quot;&gt;
	&lt;div class=&quot;title&quot;&gt;
		&lt;h3&gt;Hello&lt;/h3&gt;
	&lt;/div&gt;
	&lt;div class=&quot;small&quot;&gt;
		&lt;i class=&quot;fa fa-refresh repeat&quot;&gt;&lt;/i&gt;
		&lt;p&gt;Adele&lt;/p&gt;
		&lt;i class=&quot;fa fa-volume-up volume&quot;&gt;&lt;/i&gt;
	&lt;/div&gt;
	&lt;div class=&quot;progress&quot;&gt;
		&lt;div class=&quot;played&quot;&gt;
			&lt;div class=&quot;circle&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;controls&quot;&gt;
		&lt;i class=&quot;fa fa-backward prev&quot;&gt;&lt;/i&gt;
		&lt;i class=&quot;fa fa-play play&quot;&gt;&lt;/i&gt;
		&lt;i class=&quot;fa fa-forward next&quot;&gt;&lt;/i&gt;
	&lt;/div&gt;
	&lt;audio controls class=&quot;audio&quot; &gt;
		&lt;source src=&quot;music/Ace of Base - All That She Wants.mp3&quot; type=&quot;audio/mpeg&quot;&gt;

Declaration:

const pauseIconClassName = &#39;fa-pause&#39;
const playIconClassName = &#39;fa-play&#39;
const equalizerIconClassName = &#39;material-icons&#39;

const musicPlayer = document.querySelectorAll(&#39;.player&#39;);
const playBtn = document.querySelectorAll(&#39;.play&#39;);

const audio = document.querySelectorAll(&#39;.audio&#39;);

Function:

playBtn.forEach((playBtn) =&gt; {

playBtn.addEventListener(&#39;click&#39;, () =&gt; {
    const isPlaying = musicPlayer.classList.contains(&#39;.play&#39;);

    if (isPlaying) {
        pauseSong();
    } else {
        playSong();
    }

});
});

答案1

得分: 1

let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
let track_name = document.querySelector(".track-name");
let track_artist = document.querySelector(".track-artist");

let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");

let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");

let track_index = 0;
let isPlaying = false;
let updateTimer;

// Create new audio element
let curr_track = document.createElement('audio');

// Define the tracks that have to be played
let track_list = [
  {
    name: "Night Owl",
    artist: "Broke For Free",
    image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
    path: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/WFMU/Broke_For_Free/Directionless_EP/Broke_For_Free_-_01_-_Night_Owl.mp3"
  },
  {
    name: "Enthusiast",
    artist: "Tours",
    image: "https://images.pexels.com/photos/3100835/pexels-photo-3100835.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
    path: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Tours/Enthusiast/Tours_-_01_-_Enthusiast.mp3"
  },
  {
    name: "Shipping Lanes",
    artist: "Chad Crouch",
    image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
    path: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Chad_Crouch/Arps/Chad_Crouch_-_Shipping_Lanes.mp3",
  },
];

function random_bg_color() {

  // Get a number between 64 to 256 (for getting lighter colors)
  let red = Math.floor(Math.random() * 256) + 64;
  let green = Math.floor(Math.random() * 256) + 64;
  let blue = Math.floor(Math.random() * 256) + 64;

  // Construct a color with the given values
  let bgColor = "rgb(" + red + "," + green + "," + blue + ")";

  // Set the background to that color
  document.body.style.background = bgColor;
}

function loadTrack(track_index) {
  clearInterval(updateTimer);
  resetValues();
  curr_track.src = track_list[track_index].path;
  curr_track.load();

  track_art.style.backgroundImage = "url(" + track_list[track_index].image + ")";
  track_name.textContent = track_list[track_index].name;
  track_artist.textContent = track_list[track_index].artist;
  now_playing.textContent = "PLAYING " + (track_index + 1) + " OF " + track_list.length;

  updateTimer = setInterval(seekUpdate, 1000);
  curr_track.addEventListener("ended", nextTrack);
  random_bg_color();
}

function resetValues() {
  curr_time.textContent = "00:00";
  total_duration.textContent = "00:00";
  seek_slider.value = 0;
}

// Load the first track in the tracklist
loadTrack(track_index);

function playpauseTrack() {
  if (!isPlaying) playTrack();
  else pauseTrack();
}

function playTrack() {
  curr_track.play();
  isPlaying = true;
  playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
}

function pauseTrack() {
  curr_track.pause();
  isPlaying = false;
  playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
}

function nextTrack() {
  if (track_index < track_list.length - 1)
    track_index += 1;
  else track_index = 0;
  loadTrack(track_index);
  playTrack();
}

function prevTrack() {
  if (track_index > 0)
    track_index -= 1;
  else track_index = track_list.length;
  loadTrack(track_index);
  playTrack();
}

function seekTo() {
  let seekto = curr_track.duration * (seek_slider.value / 100);
  curr_track.currentTime = seekto;
}

function setVolume() {
  curr_track.volume = volume_slider.value / 100;
}

function seekUpdate() {
  let seekPosition = 0;

  if (!isNaN(curr_track.duration)) {
    seekPosition = curr_track.currentTime * (100 / curr_track.duration);

    seek_slider.value = seekPosition;

    let currentMinutes = Math.floor(curr_track.currentTime / 60);
    let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
    let durationMinutes = Math.floor(curr_track.duration / 60);
    let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

    if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
    if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
    if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
    if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }

    curr_time.textContent = currentMinutes + ":" + currentSeconds;
    total_duration.textContent = durationMinutes + ":" + durationSeconds;
  }
}

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Music Player</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="player">
<div class="details">
  <div class="now-playing">PLAYING x OF y</div>
  <div class="track-art"></div>
  <div class="track-name">Track Name</div>
  <div class="track-artist">Track Artist</div>
</div>
<div class="buttons">
  <div class="prev-track" onclick="prevTrack()"><i class="fa fa-step-backward fa-2x"></i></div>
  <div class="playpause-track" onclick="playpauseTrack()"><i class="fa fa-play-circle fa-5x"></i></div>
  <div class="next-track" onclick="nextTrack()"><i class="fa fa-step-forward fa-2x"></i></div>
</div>
<div class="slider_container">
  <div class="current-time">00:00</div>
  <input type="range" min="1" max="

<details>
<summary>英文:</summary>

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    let now_playing = document.querySelector(&quot;.now-playing&quot;);
    let track_art = document.querySelector(&quot;.track-art&quot;);
    let track_name = document.querySelector(&quot;.track-name&quot;);
    let track_artist = document.querySelector(&quot;.track-artist&quot;);

    let playpause_btn = document.querySelector(&quot;.playpause-track&quot;);
    let next_btn = document.querySelector(&quot;.next-track&quot;);
    let prev_btn = document.querySelector(&quot;.prev-track&quot;);

    let seek_slider = document.querySelector(&quot;.seek_slider&quot;);
    let volume_slider = document.querySelector(&quot;.volume_slider&quot;);
    let curr_time = document.querySelector(&quot;.current-time&quot;);
    let total_duration = document.querySelector(&quot;.total-duration&quot;);

    let track_index = 0;
    let isPlaying = false;
    let updateTimer;

    // Create new audio element
    let curr_track = document.createElement(&#39;audio&#39;);

    // Define the tracks that have to be played
    let track_list = [
      {
        name: &quot;Night Owl&quot;,
        artist: &quot;Broke For Free&quot;,
        image: &quot;https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=250&amp;w=250&quot;,
        path: &quot;https://files.freemusicarchive.org/storage-freemusicarchive-org/music/WFMU/Broke_For_Free/Directionless_EP/Broke_For_Free_-_01_-_Night_Owl.mp3&quot;
      },
      {
        name: &quot;Enthusiast&quot;,
        artist: &quot;Tours&quot;,
        image: &quot;https://images.pexels.com/photos/3100835/pexels-photo-3100835.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=250&amp;w=250&quot;,
        path: &quot;https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Tours/Enthusiast/Tours_-_01_-_Enthusiast.mp3&quot;
      },
      {
        name: &quot;Shipping Lanes&quot;,
        artist: &quot;Chad Crouch&quot;,
        image: &quot;https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=250&amp;w=250&quot;,
        path: &quot;https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Chad_Crouch/Arps/Chad_Crouch_-_Shipping_Lanes.mp3&quot;,
      },
    ];

    function random_bg_color() {

      // Get a number between 64 to 256 (for getting lighter colors)
      let red = Math.floor(Math.random() * 256) + 64;
      let green = Math.floor(Math.random() * 256) + 64;
      let blue = Math.floor(Math.random() * 256) + 64;

      // Construct a color withe the given values
      let bgColor = &quot;rgb(&quot; + red + &quot;,&quot; + green + &quot;,&quot; + blue + &quot;)&quot;;

      // Set the background to that color
      document.body.style.background = bgColor;
    }

    function loadTrack(track_index) {
      clearInterval(updateTimer);
      resetValues();
      curr_track.src = track_list[track_index].path;
      curr_track.load();

      track_art.style.backgroundImage = &quot;url(&quot; + track_list[track_index].image + &quot;)&quot;;
      track_name.textContent = track_list[track_index].name;
      track_artist.textContent = track_list[track_index].artist;
      now_playing.textContent = &quot;PLAYING &quot; + (track_index + 1) + &quot; OF &quot; + track_list.length;

      updateTimer = setInterval(seekUpdate, 1000);
      curr_track.addEventListener(&quot;ended&quot;, nextTrack);
      random_bg_color();
    }

    function resetValues() {
      curr_time.textContent = &quot;00:00&quot;;
      total_duration.textContent = &quot;00:00&quot;;
      seek_slider.value = 0;
    }

    // Load the first track in the tracklist
    loadTrack(track_index);

    function playpauseTrack() {
      if (!isPlaying) playTrack();
      else pauseTrack();
    }

    function playTrack() {
      curr_track.play();
      isPlaying = true;
      playpause_btn.innerHTML = &#39;&lt;i class=&quot;fa fa-pause-circle fa-5x&quot;&gt;&lt;/i&gt;&#39;;
    }

    function pauseTrack() {
      curr_track.pause();
      isPlaying = false;
      playpause_btn.innerHTML = &#39;&lt;i class=&quot;fa fa-play-circle fa-5x&quot;&gt;&lt;/i&gt;&#39;;;
    }

    function nextTrack() {
      if (track_index &lt; track_list.length - 1)
        track_index += 1;
      else track_index = 0;
      loadTrack(track_index);
      playTrack();
    }

    function prevTrack() {
      if (track_index &gt; 0)
        track_index -= 1;
      else track_index = track_list.length;
      loadTrack(track_index);
      playTrack();
    }

    function seekTo() {
      let seekto = curr_track.duration * (seek_slider.value / 100);
      curr_track.currentTime = seekto;
    }

    function setVolume() {
      curr_track.volume = volume_slider.value / 100;
    }

    function seekUpdate() {
      let seekPosition = 0;

      if (!isNaN(curr_track.duration)) {
        seekPosition = curr_track.currentTime * (100 / curr_track.duration);

        seek_slider.value = seekPosition;

        let currentMinutes = Math.floor(curr_track.currentTime / 60);
        let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
        let durationMinutes = Math.floor(curr_track.duration / 60);
        let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

        if (currentSeconds &lt; 10) { currentSeconds = &quot;0&quot; + currentSeconds; }
        if (durationSeconds &lt; 10) { durationSeconds = &quot;0&quot; + durationSeconds; }
        if (currentMinutes &lt; 10) { currentMinutes = &quot;0&quot; + currentMinutes; }
        if (durationMinutes &lt; 10) { durationMinutes = &quot;0&quot; + durationMinutes; }

        curr_time.textContent = currentMinutes + &quot;:&quot; + currentSeconds;
        total_duration.textContent = durationMinutes + &quot;:&quot; + durationSeconds;
      }
    }

&lt;!-- language: lang-html --&gt;

    &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Simple Music Player&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class=&quot;player&quot;&gt;
    &lt;div class=&quot;details&quot;&gt;
      &lt;div class=&quot;now-playing&quot;&gt;PLAYING x OF y&lt;/div&gt;
      &lt;div class=&quot;track-art&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;track-name&quot;&gt;Track Name&lt;/div&gt;
      &lt;div class=&quot;track-artist&quot;&gt;Track Artist&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;buttons&quot;&gt;
      &lt;div class=&quot;prev-track&quot; onclick=&quot;prevTrack()&quot;&gt;&lt;i class=&quot;fa fa-step-backward fa-2x&quot;&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class=&quot;playpause-track&quot; onclick=&quot;playpauseTrack()&quot;&gt;&lt;i class=&quot;fa fa-play-circle fa-5x&quot;&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class=&quot;next-track&quot; onclick=&quot;nextTrack()&quot;&gt;&lt;i class=&quot;fa fa-step-forward fa-2x&quot;&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;slider_container&quot;&gt;
      &lt;div class=&quot;current-time&quot;&gt;00:00&lt;/div&gt;
      &lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; value=&quot;0&quot; class=&quot;seek_slider&quot; onchange=&quot;seekTo()&quot;&gt;
      &lt;div class=&quot;total-duration&quot;&gt;00:00&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;slider_container&quot;&gt;
      &lt;i class=&quot;fa fa-volume-down&quot;&gt;&lt;/i&gt;
      &lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; value=&quot;99&quot; class=&quot;volume_slider&quot; onchange=&quot;setVolume()&quot;&gt;
      &lt;i class=&quot;fa fa-volume-up&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

</details>

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

我想播放这些歌曲。

问题

答案1

常量和配置文件在JavaScript项目结构中的区别是什么？

Rotating non square matrix in javascript

How do a create an array subdocument that references "guests" from another model at a future date?

JavaScript的CSS supports方法的语法是什么？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论