渡一教育公开课web前端开发JavaScript精英课学习笔记（二十七）JQuery、CSS3、TweenMax 音乐播放器

最新推荐文章于 2020-05-31 09:49:29 发布

じоνё靁〃

最新推荐文章于 2020-05-31 09:49:29 发布

阅读量566

点赞数

分类专栏： JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/88772846

版权

JavaScript、CSS、HTML 专栏收录该内容

38 篇文章 10 订阅

订阅专栏

JQuery、CSS3、TweenMax 音乐播放器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AudioPlayer</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #323232;
        }

        .player {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .player-box {
            display: flex;
            height: 100px;
            border-radius: 15px;
            background-color: #eee;
            padding: 15px 25px;
            box-shadow: 0px 0px 28px 5px rgba(0, 0, 0, 0.5);
        }

        /* .player-box-CD-img {

        } */

        .player-box-CD {
            position: relative;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-image: url('./img/nothing.png');
            background-size: cover;
            background-position: center;
            top: -50%;
            left: 10px;
            margin-right: 40px;
        }

        .player-box-CD::after {
            position: absolute;
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: #999;
            z-index: 9;
            border:10px solid #f40;
        }

        .player-box-CD::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            box-shadow: 2px 2px 28px 0px rgba(0, 0, 0, 0.5);
        }

        .player-box-control {
            display: flex;
        }

        .player-box-control-btn {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            text-align: center;
            font-size: 24px;
            line-height: 60px;
            color: #ccc;
            transition: all 0.5s ;
        }

        .player-box-control-btn:hover {
            background-color: #ddd;
            color: #fff;
        }

        .player-box-control-btn.fa-pause {
            display: none;
        }


        .player.play .player-box-control-btn.fa-pause {
            display: block;
        }

        .player.play .player-box-control-btn.fa-play {
            display: none;
        }

        .player-title {
            position: absolute;
            left: 50px;
            top: 98px;
        }

        .player-progress {
            position: absolute;
            width: 200px;
            height: 4px;
            right: 20px;
            top: 110px;
            background-color: #ddd;
        }

        .player-progress-duration {
            width: 0;
            height: 4px;
            background-color: rgb(70, 135, 233);
            /* right:10px;
            top:110px; */
        }

        .player-song-info {
            position: absolute;
            width: 62%;
            height: 100px;
            right: 5%;
            background-color: rgb(40, 219, 79);
            z-index: -22;
            top: 0;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            text-align: center;
            line-height: 28px;
            font-size: 18px;
            color: #fff;
            padding: 10px;
            letter-spacing: 0.1em;
        }
    </style>
</head>

<body>

    <div class="player">
        <div class="player-box">
            <div class="player-box-CD">
            </div>
            <div class="player-box-control">
                <div class="player-box-control-btn fa fa-backward"></div>
                <div class="player-box-control-btn">
                    <div class="player-box-control-btn fa fa-play">

                    </div>
                    <div class="player-box-control-btn fa fa-pause">

                    </div>
                </div>
                <div class="player-box-control-btn fa fa-forward"></div>
            </div>
        </div>
        <div class="player-progress">
            <div class="player-progress-duration"></div>
        </div>
        <div class="player-song-info">
            <p class="song-name">歌曲</p>
            <p class="singer">歌手</p>
        </div>
        <div class="player-title">
            AutoPlayer
        </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"> </script>
<script>
    var songs = [
        {
            songName: '狐狸',
            singer: '薛子谦',
            url: './mp3/fox.mp3',
            img: './img/fox.jpg'
        },
        {
            songName: '演员',
            singer: '薛子谦',
            url: './mp3/per.mp3',
            img: './img/per.jpg'
        }
    ];

    (function () {

        var currPlayIndex = 0;
        var audioPlayer = document.createElement('audio');
        var timeline = new TimelineMax();
        var timeWidth = $('.player-progress')[0].offsetWidth;
        console.log(timeWidth);
        timeline.to('.player-box-CD', 3, {
            rotation: '360deg',
            ease: Power0.easeNone,
            repeat: -1
        }, '-=0.2s');
        timeline.pause();

        rePlay();

        $('.player-box-control-btn.fa.fa-play').on('click', function () {
            play();
        });
        $('.player-box-control-btn.fa.fa-pause').on('click', function () {
            pause();
        });
        $('.player-box-control-btn.fa.fa-backward').on('click', function () {
            currPlayIndex--;
            if (currPlayIndex < 0) {
                currPlayIndex = songs.length - 1;
            }
            rePlay();
        });
        $('.player-box-control-btn.fa.fa-forward').on('click', function () {
            currPlayIndex++;
            if (currPlayIndex > songs.length - 1) {
                currPlayIndex = 0;
            }
            rePlay();
        });


        function rePlay() {


            TweenMax.to('.player-box-CD', 0.2, {
                scale: 1,
                ease: Power0.easeNone
            });
            TweenMax.to('.player-song-info', 0.2, {
                top: 0,
                ease: Power0.easeNone
            });
            setTimeout(function () {
                audioPlayer.src = songs[currPlayIndex].url;
                $('.player-box-CD').css('background-image', 'url(' + songs[currPlayIndex].img + ')');
                $('.player-song-info .song-name').text(songs[currPlayIndex].songName);
                $('.player-song-info .singer').text(songs[currPlayIndex].singer);
                if ($('.player').hasClass('play')) {
                    play();
                    TweenMax.to('.player-box-CD', 0.2, {
                        scale: 1.2,
                        ease: Power0.easeNone
                    });

                    TweenMax.to('.player-song-info', 0.2, {
                        top: -80,
                        ease: Power0.easeNone
                    });
                }
            }, 200);
        }

        function play() {
            $('.player').addClass('play');
            audioPlayer.play();
            timeline.play();
            TweenMax.to('.player-box-CD', 0.2, {
                scale: 1.2,
                ease: Power0.easeNone
            });

            TweenMax.to('.player-song-info', 0.2, {
                top: -80,
                ease: Power0.easeNone
            });
        }

        function pause() {
            $('.player').removeClass('play');
            timeline.pause();
            audioPlayer.pause();
            TweenMax.to('.player-box-CD', 0.2, {
                scale: 1,
                ease: Power0.easeNone
            });
            TweenMax.to('.player-song-info', 0.2, {
                top: 0,
                ease: Power0.easeNone
            });
        }

        audioPlayer.addEventListener('timeupdate',function(){
            var duration  = audioPlayer.duration;
            var curTime = audioPlayer.currentTime;
            $('.player-progress-duration').width(timeWidth * (curTime / duration) );
            if(curTime >= duration)
            {
                pause();
            }
        })

    })()




</script>

</html>

じоνё靁〃

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
渡一教育公开课web前端开发JavaScript精英课学习笔记（二十七）JQuery、CSS3、TweenMax 音乐播放器

JQuery、CSS3、TweenMax 音乐播放器<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫

专栏目录