Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Chia sẻ bộ player nhạc bằng html và js đơn giản giống facebook cho ae làm web

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi princenuce, 7/2/17.

Lượt xem: 1,429

  1. princenuce Mới đăng kí

    Trước hết là đề mô cái nhỉ y9ZdxZX.png
    Nếu sử dụng các bác có thể tách riêng cái js ra 1 file cho đỡ rườm rà :) mình viết code này lâu rồi nhưng làm biếng lôi ra share thôi, gạch đá nhận hết.
    code có chức năng play link bài hát với link bài hát các bác có thể tùy biến, việc này chỉ dành cho các bác nào đã rành html và jquery thôi nhé, mình ko hướng dẫn thêm.
    file index.html
    Code:
    <!--- các bác thay link jquery này cho đúng nhé :)) --->
    <script src="jquery-3.1.1.min.js"></script>
    
    <html>
    <body>
    
    
    <link rel="stylesheet" href="./audio.css" />
    
    
    
     <br><br>
    
    <!--- bắt đầu html của player --->
    <div class="playmusic">
    <input class="music" type="hidden" value="b.mp3">
    <div class="sek"></div>
    <div class="playbutton">
        <span class="playbtn played" onclick="test()"></span>
    </div>
    <input type="range" class="v" min="0" max="100" value='100'>
    <div class="playtime" id="playtime">00:00:00</div>
    </div>
    
    <div class="playmusic">
    <input class="music" type="hidden" value="b.mp3">
    <div class="sek"></div>
    <div class="playbutton">
        <span class="playbtn played" onclick="test()"></span>
    </div>
    <input type="range" class="v" min="0" max="100" value='100'>
    <div class="playtime" id="playtime">00:00:00</div>
    </div>
    <!--- kết thúc html của player --->
    
    <script>
        var create;
        var mid;
        var tmpid;
        audio = new Audio();
        $(document).ready(function()
            {
                $('.v').change(function(e){
                        audio.volume = $(this).val()/100;
                    }
                );
            }
        );
        function test(e)
            {
                for(i = 1; i<= $('.playbtn').length;i++){
                     $('.playbtn')[i].addClass(i+'a');
                }
            }
    
        function createAudio()
        {
            tmpid = mid;
            create = true;
        }
        function audioTime(time)
        {
            if(time<60)
            {
                return '00:00:' + Math.floor(time);
            }else
                if(time<3600)
            {
                m = Math.floor(time/60);
                s = Math.floor(time%60);
                return '00:' + (m>9? m: '0'+m) + ':' + (s>9? s: '0'+s);
            }else
                if(time<86400)
            {
                h = Math.floor(time/3600);
                m = Math.floor((time-h*3600)/60);
                s = Math.floor(time-h*3600-m*60);
                return (h>9? h: '0'+h) + ':' + (m>9? m: '0'+m) + ':' + (s>9? s: '0'+s);
            }
        }
        var i = 0;
        function loadmusic(_var)
        {
            load = false;
            mid = _var;
            if($('.playbtn.'+mid).hasClass('played') && create !== true)
            {
                // nếu chưa load audio thì thực hiện load audio và play
                // gán url audio
                audio.src = $('.music.'+mid).val();
                // thực hiện khởi tạo audio
                createAudio();
                // play thôi :3
                audio.play();
                // diêm dúa
                se();
                // thay đổi nút play và pause
                $('.playbtn.'+mid).removeClass('played');
                $('.playbtn.'+mid).addClass('pause');
            }else
                if($('.playbtn.'+mid).hasClass('played') && create == true)
            {
                // nếu đã tồn tại load audio và audio khác chưa load thì thực hiện
                // load audio mới, tắt audio cũ
                // gán url audio
                audio.src = $('.music.'+mid).val();
                // load audio mới
                audio.load();
                // xử lý các nút và diêm dúa audio cũ
                $('.playbtn.'+tmpid).removeClass('pause');
                $('.playbtn.'+tmpid).addClass('play');
                //$('.sek.'+tmpid).css('width', '0%');
                // thực hiện khởi tạo audio mới
                createAudio();
                // play thôi :v
                audio.play();
                // diêm dúa
                se();
                // xử lý các nút play và pause
                $('.playbtn.'+mid).removeClass('played');
                $('.playbtn.'+mid).addClass('pause');
            }else
                if($('.playbtn.'+mid).hasClass('pause') && create == true)
            {
                // nếu đã có audio đang play
                // dừng em nó lại nào
                audio.pause();
                if(mid !== tmpid)
                {
                    audio.load();
                    //$('.sek.'+tmpid).css('width', '0%');
                }
                se(mid);
                $('.playbtn.'+mid).removeClass('pause');
                $('.playbtn.'+mid).addClass('play');
            }else
                if($('.playbtn.'+mid).hasClass('play') && create == true)
            {
                if(tmpid !== mid)
                {
                    //$('.sek.'+tmpid).css('width', '0%');
                    audio.src = $('.music.'+mid).val();
                    audio.load();
                }
                $('.playbtn.'+tmpid).removeClass('pause');
                $('.playbtn.'+tmpid).addClass('play');
                //$('.sek.'+tmpid).css('width', '0%');
                createAudio();
                audio.play();
                se();
                $('.playbtn.'+mid).removeClass('play');
                $('.playbtn.'+mid).addClass('pause');
            }
        }
        function se()
        {
            $('.playtime.'+mid).html(audioTime(audio.duration-audio.currentTime));
            percent = (100*audio.currentTime/audio.duration);
            $('.sek.'+tmpid).css('background-image', 'repeating-linear-gradient(90deg,#D4D4D4,#D4D4D4 ' + percent +'%,transparent 0px,transparent 100%)');
            if(audio.duration-audio.currentTime == 0)
            {
                $('.playbtn.'+mid).removeClass('play');
                $('.playbtn.'+mid).removeClass('pause');
                $('.playbtn.'+mid).addClass('play');
                audio.load();
            }
            var interval = setTimeout(function()
                {
                    se();
                }, 0
            );
        }
    </script>
    
    file audio.css
    Code:
    input[type=range]{
            appearance: none;
            -webkit-appearance: none;
            border: none;
            width: 75px;
            position: absolute;
            left: 25px;
            background: transparent;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            height: 25px;
    }
    
    .playbutton{
            width: 20px;
            height: 20px;
            line-height: 15px;
            display: inline-block;
            border-radius: 30px;
            margin: 5px;
            background: #fff;
            position: relative;
    }
    
    .playbutton .pause{
            width: 0;
            height: 0;
            border: 5px solid #1C1C1C;
            position: absolute;
            display: inline-block;
            left: 5px;
            top: 5px;
            cursor: pointer;
    }
    
    .playbutton .play,.playbutton .played{
            width: 0;
            height: 0;
            border: 10px solid #1C1C1C;
            border-right: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            position: absolute;
            display: inline-block;
            left: 7px;
            top: 4px;
            cursor: pointer;
    }
    
    .playmusic{
            width: 150px;
            height: 30 p/x;
            border: 0;
            background: #EDEDED;
            line-height: 30px;
            position: relative;
            border-radius: 15px;
            font-family: sans-serif, Tahoma, Arial;
    }
    
    .playprogress{
            width: 75px;
            height: 2px;
            display: inline-block;
            background: #FF1104;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 14px 3px;
            position: absolute;
            left: 25px;
    }
    
    .playtime{
            position: absolute;
            height: 12px;
            line-height: 12px;
            font-size: 8px;
            background: #fff;
            top: 9px;
            right: 5px;
            border-radius: 5px;
            padding: 0px 5px;
            vertical-align: middle;
            color: #474747;
    }
    
    .sek{
            height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            border-radius: 15px;
    }
    input[type=range]{
        padding: 0;
    }
    input[type=range]::-moz-range-track{
            width: 50px;
            height: 5px;
            background: #fff;
            border: none;
            border-radius: 3px;
    }
    
    input[type=range]::-webkit-slider-runnable-track{
            width: 30px;
            height: 2px;
            border: none;
            border-radius: 3px;
            display: inline-block;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 10px;
            background: #fff;
    }
    
    input[type=range]::-webkit-slider-thumb{
            appearance: none;
            -webkit-appearance: none;
            border: none;
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background: #424242;
            margin-top: -3px;
    }
    
    input[type=range]:focus{
            outline: none;
    }
    
    input[type=range]:focus::-webkit-slider-runnable-track{
            background: #fff;
    }
    .nh-wrapper{
        position: absolute;
        padding: 0;
        margin: 0;
        display: inline-block;
        top: 5px; left: 25px;
        background: transparent;
    }
    .nh{
        display: inline-block;
        width: 11px;
        height: 15px;
        line-height: 15px;
        padding: 0;
        vertical-align: bottom;
        position: relative;
        background: transparent;
    }
    .l1,.l2,.l3,.l4,.l5{
        display: inline-block;
        width: 1px;
        height: 3px;
        margin: 0;
        padding: 0;
        background: #ED4D1D;
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
    }
    .l1{left: 1px;}
    .l2{left: 3px;}
    .l3{left: 5px;}
    .l4{left: 7px;}
    .l5{left: 9px;}
    
    Nguồn:
    PHP:
    http://doc-truyen.vaoday.net

    ...
    Chỉnh sửa lần cuối: 8/3/17
Từ khóa:

Ủng hộ diễn đàn