如何使用javascript/jquery為播放/暫停按鈕制作回圈-有解無憂

所以我一直在嘗試制作一個音樂播放器網站，但我一直在嘗試回圈播放/暫停腳本，我一直在嘗試，但我什么也沒找到這是我一直在使用的 javascript，它確實適用于第一首歌但不是其他人

<pre>
var mySong = document.getElementById("mySong");
var icon = document.getElementById("icon");
icon.onclick = function () {
  if (mySong.paused) {
    mySong.play();
    icon.src = "/images/pause.png";
  } else {
    mySong.pause();
    icon.src = "/images/play.png";
  }
};
</pre>

這是我試圖回圈的 html 部分

<pre>
<div class="music-box">
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/a.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
        </div>
      </div>
      <div class="music-play">
        <div class="play-image">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="play-controls">
          <div class="controls">
            <div class="song-name">
              <h5>Dunkelheit</h5>
              <p>Burzum</p>
            </div>
            <div class="play-icon">
              <i class="fa fa-step-backward"> </i>
              <i class="fa fa-play"> </i>
              <i class="fa fa-step-forward"> </i>
            </div>
          </div>
          <div class="music-progress">
            <div class="progress">
              <div class="progress-bar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</pre>

這是我第一次使用 stackoverflow，很抱歉我的檔案很差，希望你能給我提供解決方案或教程，因為這是我學習前端的第一個月。ps:- 抱歉我的英語不好，因為我不是母語人士。

uj5u.com熱心網友回復：

我認為您遇到的問題是您使用 jQuery 創建了一個 EventHandler 并且它尋找一些具有“icon”ID 的元素。但這不是 HTML 的作業方式。您有多個具有相同 ID 的元素。這是不正確的。

這樣做的正確的方法是創建一個與事件處理程式類的“圖示”不是的“圖示”的ID。當處理程式被觸發時，您應該更改此元素的“src”屬性。

在我運行您的 HTML 和 JS 之后，我意識到您在腳本上使用了 Object.onclick 屬性來觸發更改 src 屬性的函式。你無法實作你想要的，因為你試圖用 id 來 DOM 你的元素。首先，將所有 id 轉換為類。然后您應該執行以下操作，將所有影像的 onclick 屬性設定為您的函式。您不能在元素集合上執行此操作。您可以使用 for 回圈一一執行。（您最好為此使用 jQuery，但由于您是 JS 新手，請嘗試這種用法，看看會發生什么。）

var mySong = document.getElementById("mySong");
var icons = document.getElementsByClassName("icon");

var clickFunction = function () {
  alert("kkk");
  if (mySong.paused) {
    mySong.play();
    icon.src = "/images/pause.png";
  } else {
    mySong.pause();
    icon.src = "/images/play.png";
  }
};


for (var i=0; i < icons.length; i  ) {
    icons[i].onclick = clickFunction;
};

uj5u.com熱心網友回復：

嗨，歡迎來到 Stack Overflow！

我不完全確定您所說的“回圈音頻”是什么意思，但部分問題可能是您的 HTML 中的音頻元素沒有獨立的 id 值。“id”屬性應該給每個音頻元素一個唯一的識別符號，但是你已經給檔案中的每個音頻元素賦予了“mySong”的id 。

如果您希望它們從一個音頻剪輯順序移動到另一個音頻剪輯，您可以考慮在瀏覽器外部連接音頻，然后上傳單個音頻元素。如果沒有關于您正在尋找的具體內容的更多資訊，將很難解決。

uj5u.com熱心網友回復：

首先，當您對所有音頻歌曲使用相同的 id 時，您希望此代碼如何作業：>，該 id 僅用于一個元素，因此要使用它，您應該使用 class 或 data-[attribute]和select元素，順便說一句，這是一個關于短期使用data-[]的鏈接https://reactgo.com/select-element-data-attribute-js/#:~:text=To select the multiple elements,const elements = document。

const songs = document.querySelectorAll("[data-songs]");
const icons = document.querySelector("#icon");

songs.forEach((song) => {

    icon.addEventListener('click', function () {
        //put code of icon here 
        if (mySong.paused) {
            mySong.play();
             icon.src = "/images/pause.png";
        } else {
            mySong.pause();
             icon.src = "/images/play.png";
        }
    })
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="music-box">
        <div class="music-info">
            <div class="music-img">
                <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
                <h6>Single Song Title</h6>
                <audio id="mySong" data-songs='1'>
                    <source src="test.mp3" type="audio/mp3" />
                </audio>
                <p>Single name and music director</p>
            </div>
            <img src="http://simpleicon.com/wp-content/uploads/play1.png" id="icon" style="padding-right: 20px; height:50px"  />
        </div>
    </div>

    <div class="music-play">
        <div class="play-image">
            <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="play-controls">
            <div class="controls">
                <div class="song-name">
                    <h5>Dunkelheit</h5>
                    <p>Burzum</p>
                </div>
                <div class="play-icon">
                    <i class="fa fa-step-backward"> </i>
                    <i class="fa fa-play"> </i>
                    <i class="fa fa-step-forward"> </i>
                </div>
            </div>
            <div class="music-progress">
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>

</body>
<script src="app.js"></script>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/369870.html

標籤：javascript html 查询循环

上一篇：查找時間塊與增量開始時間的可能組合

下一篇：為什么不使用我的application-test.properties中的配置？