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: 3,503

  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

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Chỉnh sửa lần cuối: 8/3/17
    princenuce, 7/2/17
    #1
Từ khóa:

Ủng hộ diễn đàn