我有一个mp3播放器，我用jQuery构建，在它的范围滑块不工作的音频播放器。我尝试了下面的代码，但它不起作用。我尝试了很多不同的代码从不同的地方，但似乎没有工作。在Mozilla浏览器上，它的工作正常，但在chrome滑块不工作。我最近的一次尝试是这样的。
let previous = document.querySelector('#pre');
let play = document.querySelector('#play');
let next = document.querySelector('#next');
let title = document.querySelector('#title');
let recent_volume = document.querySelector('#volume');
let volume_show = document.querySelector('#volume_show');
let slider = document.querySelector('#duration_slider');
let show_duration = document.querySelector('#show_duration');
let track_image = document.querySelector('#track_image');
let auto_play = document.querySelector('#auto');
let present = document.querySelector('#present');
let total = document.querySelector('#total');
let artist = document.querySelector('#artist');
let timer;
let autoplay = 0;
let index_no = 0;
let Playing_song = false;
//create a audio Element
let track = document.createElement('audio');
//All songs list
let All_song = [{
name: "{{ $data->name }}",
path: "{{ asset('assets/' . $data->file) }}",
img: "/assets/images/quran.jpg",
singer: "{{ $data->description }}"
}
];
// All functions
// function load the track
function load_track(index_no) {
clearInterval(timer);
reset_slider();
track.src = All_song[index_no].path;
title.innerHTML = All_song[index_no].name;
track_image.src = All_song[index_no].img;
artist.innerHTML = All_song[index_no].singer;
track.load();
timer = setInterval(range_slider, 500); // update the range slider every 500 milliseconds
total.innerHTML = All_song.length;
present.innerHTML = index_no + 1;
}
load_track(index_no);
//mute sound function
function mute_sound() {
track.volume = 0;
volume.value = 0;
volume_show.innerHTML = 0;
}
// checking.. the song is playing or not
function justplay() {
if (Playing_song == false) {
playsong();
} else {
pausesong();
}
}
// reset song slider
function reset_slider() {
slider.value = 0;
}
// play song
function playsong() {
track.play();
Playing_song = true;
play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
}
//pause song
function pausesong() {
track.pause();
Playing_song = false;
play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
}
// next song
function next_song() {
if (index_no < All_song.length - 1) {
index_no += 1;
load_track(index_no);
playsong();
} else {
index_no = 0;
load_track(index_no);
playsong();
}
}
// previous song
function previous_song() {
if (index_no > 0) {
index_no -= 1;
load_track(index_no);
playsong();
} else {
index_no = All_song.length;
load_track(index_no);
playsong();
}
}
// change volume
function volume_change() {
volume_show.innerHTML = recent_volume.value;
track.volume = recent_volume.value / 100;
}
// change slider position
function change_duration() {
slider_position = track.duration * (slider.value / 100);
track.currentTime = slider_position;
setInterval(range_slider, 1000); // update the range slider every 1000 milliseconds (1 second)
}
// autoplay function
function autoplay_switch() {
if (autoplay == 1) {
autoplay = 0;
auto_play.style.background = "rgba(255,255,255,0.2)";
} else {
autoplay = 1;
auto_play.style.background = "#FF8A65";
}
}
function range_slider() {
let current_time = Math.floor(track.currentTime); // get the current time of the audio in seconds
let duration = Math.floor(track.duration); // get the total duration of the audio in seconds
let minutes = Math.floor(current_time / 60); // calculate the minutes for the current time
let seconds = current_time % 60; // calculate the seconds for the current time
let total_minutes = Math.floor(duration / 60); // calculate the minutes for the total duration
let total_seconds = duration % 60; // calculate the seconds for the total duration
// display the current time and total duration in the format "mm:ss"
show_duration.innerHTML = `${minutes}:${seconds} / ${total_minutes}:${total_seconds}`;
// update the range slider to reflect the current time
slider.value = (current_time / duration) * 100;
}