javascript 范围滑块在音频播放器、JQuery、HTML中不工作

8ljdwjyq  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(118)

我有一个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;
}
    • 超文本标记语言**
<div class="duration">
       <input type="range" min="0" max="100" value="0" 
                id="duration_slider"
                onchange="change_duration()">
 </div>
elcex8rz

elcex8rz1#

通过将计算和赋值合并到一行中,我删除了不必要的变量minutes、seconds、total_minutes和total_seconds。

function range_slider() {
    let current_time = Math.floor(track.currentTime);
    let duration = Math.floor(track.duration);
    show_duration.innerHTML = `${Math.floor(current_time / 60)}:${current_time % 60} / ${Math.floor(duration / 60)}:${duration % 60}`;
    slider.value = (current_time / duration) * 100;
    }

相关问题