Блог

Главная - Вопросы по программированию - Нажмите на ссылку плейлиста, чтобы запустить и остановить музыку в audioplayer

Нажмите на ссылку плейлиста, чтобы запустить и остановить музыку в audioplayer

#javascript #html #event-listener

#javascript #HTML #прослушиватель событий

Вопрос:

Это мой первый вопрос, и я новичок, поэтому решение может быть очевидным.

Я попробовал простую вещь: плейлист, где при нажатии на ссылку на песню он начинает воспроизводиться. Это работает.

Что не работает, так это при повторном нажатии на ссылку на песню, я бы хотел, чтобы это остановило воспроизведение музыки. К сожалению, этого не происходит. Я попробовал eventListener , и простая if функция. К сожалению, консоль выдает ошибки, которые после исправления разрешаются в другом. Так что, по сути, я застрял, бегая по кругу. Это может быть очевидной ошибкой (в комментариях я включил варианты, которые я пробовал). Любой совет был бы очень признателен.

Пожалуйста, найдите проект по ссылке и фрагмент кода:

 *playlist*/

audioPlayer();
function audioPlayer() {
  var nowPlaying = 0;

  $("#audioPlayer")[0].src = $(".playlist li a")[0];

  $(".playlist li a").click(function (e) {
    e.preventDefault();
    $("#audioPlayer")[0].src = this;
    $("#audioPlayer")[0].play();
    $(".playlist li").removeClass("playing");
    nowPlaying = $(this).parent().index();
    $(this).parent().addClass("playing");
  });

  $("playlist li a").click(function () {
    if ("#audioPlayer".play) {
      "#audioPlayer".pause();
    }
  });
}

const tune = document.getElementsByClassName(".tune-name");
const player = document.getElementById("#audioPlayer");

function play() {
  tune.addEventListener("click", function () {
    alert("hi");
    if (player.play) {
      player.pause();
    }
  });
}

/*
const tune = document.getElementsByClassName('.tune-name');
const player = document.getElementById('#audioPlayer'); 
 
 function play(){

   tune.addEventListener('click', () => {
  
     if (player.paused) {
            player.play();
             
        }
        else{
            player.pause();
        } 
          
        });
 }
*/

const rocketOne = document.getElementsByClassName(".rocketone");
const tuneNameOne = document.getElementsByClassName(".tune-name one");

function rocket() {
  tuneNameOne.addEventListener("click", function () {
    rocketOne.classList.add("rocketoneafter");
  });
}


  
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1"
    />

    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>

    <link rel="stylesheet" type="text/css" href="musicshop.css" />

    <script type="text/javascript" src="musicshop.js" defer></script>

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Squada Oneamp;display=swap"
      rel="stylesheet"
    />

    <script
      src="https://kit.fontawesome.com/00d9109818.js"
      crossorigin="anonymous"
    ></script>

    <title>musicshop</title>
  </head>

  <body>
    <!--<div class="major">-->

    <!--animation-->
    <!--
<div class="stage">
   
 <div class="traveler">-->
    <div class="wrapper">
      <div class="rockets">
        <div class="rocketone">
          <div class="fin-wrap">
            <div class="left-fin jeden"></div>
            <div class="right-fin jeden"></div>
          </div>
          <div class="body jeden">
            <div class="window"></div>
          </div>
        </div>

        <div class="rockettwo">
          <div class="fin-wrap">
            <div class="left-fin dwa"></div>
            <div class="right-fin dwa"></div>
          </div>
          <div class="body dwa">
            <div class="window"></div>
          </div>
        </div>

        <div class="rockettr">
          <div class="fin-wrap">
            <div class="left-fin trzy"></div>
            <div class="right-fin trzy"></div>
          </div>
          <div class="body trzy">
            <div class="window"></div>
          </div>
        </div>

        <div class="rocketfo">
          <div class="fin-wrap">
            <div class="left-fin czt"></div>
            <div class="right-fin czt"></div>
          </div>
          <div class="body czt">
            <div class="window"></div>
          </div>
        </div>

        <div class="rocketfv">
          <div class="fin-wrap">
            <div class="left-fin pt"></div>
            <div class="right-fin pt"></div>
          </div>
          <div class="body pt">
            <div class="window"></div>
          </div>
        </div>

        <div class="rocketsx">
          <div class="fin-wrap">
            <div class="left-fin sze"></div>
            <div class="right-fin sze"></div>
          </div>
          <div class="body sze">
            <div class="window"></div>
          </div>
        </div>

        <div class="rocketsv">
          <div class="fin-wrap">
            <div class="left-fin sie"></div>
            <div class="right-fin sie"></div>
          </div>
          <div class="body sie">
            <div class="window"></div>
          </div>
        </div>
      </div>
      <!--rockets-->
      <!--</div>--><!--traveler-->
      <!--</div>--><!--stage-->

      <!--end of animation-->

      <ul class="playlist">
        <li class="tune">
          <a class="tune-name one" href="mp3/Disco80s.mp3">DISCO '80S</a>
        </li>

        <li class="tune">
          <a class="tune-name two" href="mp3/LoFiSept.mp3">LoFi SEPT</a>
        </li>

        <li class="tune">
          <a class="tune-name tr" href="mp3/MelodieRomantic.mp3"
            >MELODY ROMANTIC</a
          >
        </li>

        <li class="tune">
          <a class="tune-name fo" href="mp3/RetroPanKlex.mp3">RETRO PAN KLEX</a>
        </li>

        <li class="tune">
          <a class="tune-name fv" href="mp3/RomanticLoFi.mp3">ROMANTIC LoFi</a>
        </li>

        <li class="tune">
          <a class="tune-name sx" href="mp3/SessionAug.mp3">SESSION AUG</a>
        </li>

        <li class="tune">
          <a class="tune-name sv" href="mp3/SessionSep.mp3">SESSION SEPT</a>
        </li>
      </ul>
      <!--playlist-->
    </div>
    <!--wrapper-->

    <!--</div>-->
    <!--major-->

    <audio src="" controls id="audioPlayer"></audio>
  </body>
</html>

Code sandbox

Метки: ,