Trình phát html5

Thôi nói chung cái này tui thấy cái thư viện này nó hay nè, nó lải nhải nè nên giới thiệu choa anh em coi chơi

Nội dung chính Show

Ai có nhu cầu nhúng Player vào web thì coi thử nhoa

Vime. js support anh em Youtube, Vimeo, Dailymotion, HTML5, v. v

Trang chủ của nó đây. https. // vimejs. com/

Về cơ bản hướng dẫn trên trang chủ rất chi tiết nên không còn gì phải nói thêm

Anh em thích thì thích mà không thích thì commet chơi nha

Thẻ

nghiane nghĩa nè vimejs vime. js html5 player html player player web nghĩa nè code js vime

chia sẻ

Nghĩa Nê

Bạn có thể quan tâm

CẬP NHẬT. Trình phát âm thanh HTML5 với Danh sách phát. https. //github. com/trangsihung/html5-audio-player-with-playlist

Trong bài trước mình đã hướng dẫn sử dụng jQuery để điều khiển Thẻ âm thanh HTML5, lần này dựa vào đó chúng ta sẽ tạo Trình phát âm thanh HTML5 đơn giản. Trong bài mình tập trung vào jQuery, còn phần giao diện HTML-CSS thì các bạn có thể tham khảo phần này trong phần code HTML-CSS hoặc tự code một cái

HTML–CSS

One new in code HTML-CSS on is tag

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

3 in HTML5. Về

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

0 bạn có thể xem thêm thông tin tại

Nút điều khiển của người chơi là mình dùng để làm

JAVASCRIPT

Đây là phần quan trọng nhất đối với HTML5 Audio Player, ta thêm vào các tệp js sau. thư viện jQuery, plugin prefixfree giúp tự bổ sung tiền tố

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

1 trong CSS

người chơi. js xử lý các thao tác mà chúng ta thực hiện trên trình phát như. nhấn play/pause, stop, tăng/giảm âm lượng
chủ yếu. js is main script section

Bắt đầu với

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

2, đầu tiên ta tạo bộ chọn jQuery cho các thành phần của trình phát và gọi hàm

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

3 với tham số là biến

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

Sau đó trong tệp

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

5 ta tạo hàm

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

3 với các sự kiện nhấp vào nút chơi và nút dừng trên trình phát

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

Ta thấy khi click vào

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

7, if icon is pause thì sẽ chuyển thành play và ngược khi icon is play thì sẽ chuyển thành pause. Khi nhấn nút dừng, biểu tượng tạm dừng sẽ phát thành công. Nếu thấy khó hiểu các bạn có thể xem click vào demo bên dưới để dễ hiểu hơn. function

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

8 giúp code gọn hơn khi addClass và removeClass

Tiếp tục trong

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

2 tạo thêm biến số

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

0 lưu các thông tin về bài hát, bao gồm tên bài hát, ca sĩ và link file mp3

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

Đổi

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

2 và giá trị

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

3 theo

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

0. Đặt mức cấm âm lượng đầu tiên của Âm thanh theo giá trị của

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

5, do âm lượng chỉ có giá trị từ 0 đến 1 nên ta chia giá trị của

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

5 cho 100 (do ta set max=100). Use

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

7 to audio auto play

F5 lại trình duyệt để kiểm tra kết quả. Ta thấy âm thanh đã phát tự động.
Tiếp theo là liên kết các điều khiển trên trình phát với phần Âm thanh.

Giải thích đoạn mã trên, khi Audio được phát thì giá trị của

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

8 sẽ thay đổi và có sự kiện của

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

9, khi đó ta tính phần trăm giữa

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

8 và

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

41 và lấy phần thưởng này đặt chiều rộng cho

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

42 và giá trị của

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

43. Còn

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

42 và

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

43 là phần nào thì xem lại phần HTML-CSS

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

Khi click vào

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

43, ta lấy

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

47 là phần trăm thời gian đã phát, từ đó tính thời gian của Audio khi đã phát theo

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

47. VD. Khi click thì

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

47 is 40. Ta set

20 is 40% of

Hoàn thành chức năng điều khiển, sữa lại chức năng điều khiển trong

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

2 thành

23, mở tệp

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

5 và thêm tham số

25 vào trình phát hàm. Viết thêm

26 khi chuyển từ

27 sang

28,

function control(ctrl) {
    ctrl.play.on('click', function(e) {
        e.preventDefault();
        status = $(this).find('i').hasClass('icon-pause') ? 'play' : 'pause';

        if(status == 'play'){
            $(this).changeClass('icon-pause','icon-play');
        }else{
            $(this).changeClass('icon-play','icon-pause');
        }
    });

    ctrl.stop.on('click', function(e) {
        e.preventDefault();
        button.play.changeClass('icon-pause','icon-play');
    });
}

$.fn.changeClass = function(before, after) {
    $(this).find('i').removeClass(before).addClass(after);
}

7 khi chuyển từ

28 sang

27. Và thêm

32 khi nhấp vào nút dừng

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

Do ta lấy giá trị của

33 là phần thưởng khối lượng nên khi thay đổi giá trị sẽ làm thay đổi khối lượng

var player = {
        play  : $('#play'),
        stop  : $('#stop'),
        vol :   $('.volume input'),
    },
    song = new Audio();
    song.type = 'audio/mpeg';
    control_player(song, player);

Tóm tắt

Do đó đã hoàn thành đơn giản HTML5 Audio Player. Dựa vào code trong bài này, bài sau mình sẽ hướng dẫn tạo playlist cho HTML5 Audio Player mới tạo này

Do mình viết theo cách hiểu của mình khi mã nên có thể khi đọc bài viết bạn sẽ không hiểu lắm. Bạn nên vừa đọc vừa thực thi code thì sẽ dễ hiểu hơn. Ở cuối bài có phần demo và code khi hoàn thành bạn có thể down về xem

programming html

Trình phát html5

Thẻ

Nghĩa Nê

Bạn có thể quan tâm

HTML–CSS

JAVASCRIPT

Tóm tắt

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội