-1
J'ai besoin d'aide. Chaque fois que le bouton suivant est pressé, le lecteur va jouer et afficher la piste suivante correctement, cependant, la barre de progression et la durée ne fonctionnent pas correctement. le volume augmente également à 100 quand il devrait rester comme précédemment réglé.Lecteur audio jquery - problèmes de fonction suivante
https://jsfiddle.net/independentlegends/zsbo58hc/
<body>
<div id="audio_player">
<div class="audio-info">
<!-- <span class="artist"></span> - <span class="title"></span> -->
</div>
<div><a id="i-legends" target="_blank" href="http://www.independentlegends.com" class="text-center"><strong>Powered by: IndependentLegends.com</strong></a></div>
<div id="audio_controls">
<div class="clear-fix"></div>
<div id="audio-img">
<img class="tapecover" src="">\
<h2 id="playlist_status"></h2>
</div>
<div id="tracker">
<span id="curduration"></span>
<div id="progressbar">
<span id="progress"></span>
</div>
<span id="duration"></span>
</div>
<div class="clear-fix"></div>
<div id="buttons">
<button id="prev"></button>
<button id="play"></button>
<button id="pause"></button>
<button id="stop"></button>
<button id="next"></button>
<input id="volume" type="range" min="0" max="100" value="30" step="1">
<button id="mutebtn"></button>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="clear-fix"></div>
<ul id="mylist" cover="http://www.i-legends.com/images/LostTape.jpg" artist="MaseratiBaby">
<li data-mixtrack="1. Big Mad" class="active">1. Big Mad</li>
<li data-mixtrack="2. 24.7">2. 24.7</li>
<li data-mixtrack="3. Robbins And Jordans">3. Robbins and Jordans</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
CSS
body {
background-color: grey;
}
div#audio_player {
width: 450px;
height: 300px;
background: url(images/sdeskin.png) no-repeat;
border-radius: 4px
}
div#audio_controls {
margin-left: 66px;
clear: both
}
div#audio_controls > #buttons > button {
border: none;
cursor: pointer;
outline: none;
display: block;
float: left;
margin: 10px 10px 0px 0px;
}
div#audio_controls > input {
outline: none;
display: block;
float: left;
margin: 10px 10px 10px 0px;
border-radius: 5px
}
#audio-img {
overflow: hidden;
margin: 15px 15px 0px 40px;
padding-top: 15px;
margin-left: 0px;
}
.tapecover {
width: 15%;
z-indez: 1;
float: left;
padding-right: 15px;
margin-left: 2%;
}
button#prev {
height: 20px;
width: 20px;
background: url(images/prev.svg) no-repeat;
background-size: contain;
float: left;
}
button#next {
height: 20px;
width: 20px;
background: url(images/next.svg) no-repeat;
background-size: contain;
float: left;
}
button#stop {
height: 20px;
width: 20px;
background: url(images/stop.svg) no-repeat;
background-size: contain;
float: left;
}
button#pause {
height: 20px;
width: 20px;
background: url(images/pause.svg) no-repeat;
background-size: contain;
float: left;
}
button#play {
background: url(images/play.svg) no-repeat;
width: 20px;
height: 20px;
background-size: contain;
float: left;
border: none;
}
button#mutebtn {
background: url(images/speaker.png) no-repeat;
width: 20px;
height: 20px;
background-size: contain;
float: right !important;
margin-top: 10px !important;
}
input#seekslider{
width:100px;
}
input#volume{
width: 70px;
border-radius: 5px;
float: right;
margin-top: 13px;
}
#buttons {
width: 260px;
outline: none;
margin-left: 30px;
}
#tracker {
position: relative;
width: 260px;
}
#progressbar {
width: 260px;
margin-bottom: 0px;
margin-right; 15px;
margin-left: 30px;
height: 10px;
background: url(images/progress_bg.png) no-repeat;
float: left;
display: inline-block;
}
#progress {
background: url(images/progress.png) no-repeat;
height: 10px;
display: inline-block;
margin-bottom: 5px;
position: absolute;
}
#duration {
position: absolute;
top: -7px;
right: -79px;
padding: 2px 4px;
background: black;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: .7em;
color: #09F;
font-family: Arial, Helvetica, sans-serif;
}
#curduration {
position: absolute;
top: -7px;
left: -20px;
padding: 2px 4px;
background: black;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-size: .7em;
color: #09F;
font-family: Arial, Helvetica, sans-serif;
}
input[type='range'] {
-webkit-appearance: none !important;
margin:0px;
padding:0px;
background: #000;
height:13px;
border-bottom:#333 1px solid;
}
input[type='range']::-ms-fill-lower {
background:#000;
}
input[type='range']::-ms-fill-upper {
background:#000;
}
input[type='range']::-moz-range-track {
border:none;
background: #000;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: radial-gradient(#FFF, #333);
height:11px;
width:11px;
border-radius:100%;
cursor:pointer;
}
input[type='range']::-moz-range-thumb {
background: radial-gradient(#FFF, #333);
height:11px;
width:11px;
border-radius:100%;
cursor:pointer;
}
input[type='range']::-ms-thumb {
-webkit-appearance: none !important;
background: radial-gradient(#FFF, #333);
height:11px;
width:11px;
border-radius:100%;
cursor:pointer;
}
#mylist li {
cursor: pointer;
background-color: black;
color: white;
}
#mylist li.active{
font-weight: bold;
padding: 3px;
background: #666;
}
#i-legends {
clear: both;
text-decoration: none;
color: lightgrey;
border-radius: 3px;
padding: 0px 2px 0px 2px;
font-size: 8px;
margin-top: 210px;
font-family: Montserrat;
float: right;
}
#playlist_status {
float: left;
}
.clear-fix {
clear: both;
}
javascript
var audio, seeking=false;
// hide pause button
$('#pause').hide();
$('#duration').hide();
$('#curduration').hide();
//initialize
initAudio($('#mylist li.active'));
audio.addEventListener("timeupdate", updateProgress, false);
audio.addEventListener("timeupdate", showDuration, false);
// initializer function
function initAudio(element) {
var song = element.attr('data-mixtrack');
var title = element.text();
var cover = element.parent().attr('cover');
var artist = element.parent().attr('artist');
var progress = document.getElementById("progress");
var dir = "audio/"
//playlist_index = 0;
var ext = ".mp3";
var agent = navigator.userAgent.toLocaleLowerCase();
if(agent.indexOf('firefox') != -1 || agent.indexOf('opera') != -1) {
ext = ".ogg";
}
//create audio object
audio = new Audio(dir + song + ext);
if (!audio.currentTime) {
$('#duration').html(0.00);
}
$('#playlist_status').text(title);
//insert cover
$('.tapecover').attr('src', cover);
$('#mylist li').removeClass('active');
element.addClass('active');
}
//play button
$('#play').click(function() {
audio.play();
$('#play').hide();
$('#pause').show();
$('#duration').fadeIn(400);
$('#curduration').fadeIn(400);
showDuration();
});
//pause button
$('#pause').click(function() {
audio.pause();
$('#pause').hide();
$('#play').show();
});
//stop button
$('#stop').click(function() {
audio.pause();
audio.currentTime = 0;
$('#pause').hide();
$('#play').show();
$('#duration').fadeOut(400);
$('#curduration').fadeOut(400);
});
// next button
$('#next').click(function() {
audio.pause();
var next = $('#mylist li.active').next();
if(next.length == 0) {
next = $('#mylist li:first-child');
}
initAudio(next);
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
// prev button
$('#prev').click(function() {
audio.pause();
audio.currentTime = 0;
var prev = $('#mylist li.active').prev();
if(prev.length == 0) {
prev = $('#mylist li:last-child');
}
initAudio(prev);
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
// Time Duration
function showDuration() {
var nt = audio.currentTime * (100/audio.duration);
progress.value = nt;
var curmins = Math.floor(audio.currentTime/60);
var cursecs = Math.floor(audio.currentTime - curmins * 60);
var durmins = Math.floor(audio.duration/60);
var dursecs = Math.floor(audio.duration - durmins * 60);
if(cursecs < 10) { cursecs = "0" + cursecs; }
if(dursecs < 10) { dursecs = "0" + dursecs; }
if(curmins < 10) { curmins = "0" + curmins; }
if(curmins < 10) { durmins = "0" + durmins; }
curduration.innerHTML = curmins + ":" + cursecs;
duration.innerHTML = durmins + ":" + dursecs;
}
function updateProgress() {
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100/audio.duration) * audio.currentTime);
}
progress.style.width = value + "%";
}
// change track
$('#mylist li').click(function() {
audio.pause();
$('#mylist li').removeClass('active');
$(this).addClass('active');
initAudio($(this));
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
// volume
$('#volume').change(function() {
audio.volume = parseFloat(this.value/100);
});
$(document).ready (function() {
audio.volume = $('#volume').attr('value')/100;
});
Je suis sûr que son ordre de mon code, mais je ne suis pas sûr de savoir comment le fixer.
Toute aide serait appréciée.
merci.
Veuillez poster votre code gênant ici, les liens vers jsFiddle seul sont insuffisants. – BenM