Radyo player durdur kısmı çalışmıyor
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");
}
});
});";
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.