v2.5.2
Giriş yap

Radyo player durdur kısmı çalışmıyor

maviyapim
548 defa görüntülendi

Merhabalar, bir player buldum fakat durdur kısmı çalışmıyor.Bu konuda yardımcı olursanız sevinirim.

Js, Css ve Html Kodları aşağıdadır

<div class="wrap-fixed">
      <div class="container-fixed">
        <div class="player">
          <span class="vol play_btn_fixed">
            <a class="button play" data-state="play" href="#">
              <i class="fas fa-play" aria-hidden="true"></i>
            </a>
          </span>
          <span id="tuner">
            <input class="volumeLevel" type="range" value="0.5" step="0.1" max="1"/>
            <span class="vol volume_fixed">
              <a class="button volume" href="#">
                <i class="fas fa-volume-up" aria-hidden="true"></i>
              </a>
            </span>
          </span>
        </div>
      </div>
  </div>
.container-fixed {
  text-align: center;
  padding: 15px;
  background: linear-gradient(to top, #33539a 0%, #4b6cb4 100%);
  display: inline-block;
  color: white;
  width: 100%;
  z-index: 5;
}
.container-fixed:hover .volumeLevel {
  opacity: 1;
}

.wrap-fixed a {
  text-decoration: none;
  outline: none;
}
.wrap-fixed a i {
  color: white;
}

.player {
  padding: 0 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.play_btn_fixed {
  border: 1px solid white;
  border-radius: 50px;
  padding: 9px 12px;
  float: left;
  margin-left: 30px;
}
.play_btn_fixed:hover {
  background: #5785b4;
}

.volume_fixed {
  padding: 8px;
  border-radius: 50px;
  border: 1px solid white;
}
.volume_fixed:hover {
  background: #5785b4;
}

.fa-volume-mute {
  margin: 0 1px;
}

.vol {
  display: inline-block;
}

.volumeLevel {
  width: 95px;
}
#tuner {
  float: right;
  margin-right: 50px;
}

  $(document).ready(() => {
  let play = $(".play"),
      track = new Audio(
        "https://radyo44.80.yayin.com.tr/steram/"
      ),
      volume = $(".volume"),
      volumeLevel  = $(".volumeLevel"),
      buttons = $(".button"); 

    // play/pause button functionality
    play.click(function(e){
      console.log('playing')
      e.preventDefault();
      let $this = $(this),
        state = $this.attr("data-state");

      if(state == "play"){
        track.play();
        player.pause();
        $this.find("i").removeClass("fas fa-play").addClass("fas fa-pause");

        $this.removeAttr("data-state");
        $this.attr("data-state", "pause");
      } else {
        track.pause();
        console.log('paused');
        play.find("i").removeClass("fas fa-pause").addClass("fas fa-play");

        play.removeAttr("data-state");
        play.attr("data-state", "play");
        }

       return false;
    });

    // change the volume on with the slider
    volumeLevel.on("change", function(){
      var curVol = $(this).val();
      track.volume = curVol;
    });
  
  // toggle between mute and unmute icons
    let isMusicPlaying = true;
    volume.click((e) => {
      e.preventDefault();
      isMusicPlaying = !isMusicPlaying;
      
      if(isMusicPlaying) {
        volumeLevel.val(0.5);
        volume.find('i').removeClass('fa-volume-mute').addClass("fa-volume-up");
      } else {
        volumeLevel.val(0);
        volume.find('i').removeClass('fa-volume-up').addClass("fa-volume-mute");
      }
    });
});";
ilyasbilgihan
1467 gün önce

Kod içerisindeki player.pause(); satırında hata meydana geldiğinden o bloktaki sonraki satırlar işleme alınmıyor yani data-state değeri pause olarak atanamıyor. Bu durumda data-state değeri her zaman play olarak kalıyor yani else bloğu (durdurma tıklaması) çalışmıyor. O satırda hata vermesinin sebebi ise player diye bir değişkenin olmaması. O satırı komple silerseniz sorun ortadan kalkacaktır.