找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发一款自制移动端音乐播放器

2018-12-14 分类：教程 阅读(752) 评论(0)
游戏引擎 web前端开发
棋牌游戏前端开发
游戏前端功能开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>手机音乐播放器</title>
        <link rel=”stylesheet” href=”../css/index.css” />
        <script src=”../js/jquery-1.12.4.js”></script>
    </head>
    <body>
        <div id=”container”>
            <div id=”header”>
                <ul class=”signal”>
                    <li class=”signLi01″></li>
                    <li class=”signLi02″></li>
                    <li class=”signLi03″></li>
                    <li class=”signLi04″></li>
                    <li class=”signLi05″></li>
                </ul>
                <div class=”time”></div>
                <div class=”pic”><img src=”../images/sign12.png” /></div>
            </div>
            <div id=”content”>
                <div id=”myCollect”>
                    <div id=”nav”>
                        <div class=”title”>
                            <a href=”javascript:;”
                                ><img class=”ceHua” src=”../images/sign01.png”
                            /></a>
                            <h2>我的收藏</h2>
                        </div>
                        <div class=”network”>
                            <a href=”#”><img src=”../images/sign03.png”/></a>
                        </div>
                        <div class=”search”>
                            <a href=”#”><img src=”../images/sign02.png”/></a>
                        </div>
                    </div>
                    <div id=”items”>
                        <ul>
                            <!–
                                <li>
                                 <h2>1</h2>
                                 <div>
                                 <h3>白天不懂夜的黑</h3>
                                 <p>群星</p>
                                 </div>
                                 <img src=”../images/sign04.png”>
                                 </li>
                            –>
                        </ul>
                        <div class=”progress”></div>
                    </div>
                </div>
                <div id=”mySinging”>
                    <div id=”singNav”>
                        <div class=”title”>
                            <a href=”javascript:;”
                                ><img class=”collect” src=”../images/sign01.png”
                            /></a>
                            <h2>本地音乐</h2>
                        </div>
                        <div class=”network”>
                            <a href=”#”><img src=”../images/sign03.png”/></a>
                        </div>
                        <div class=”search”>
                            <a href=”#”><img src=”../images/sign02.png”/></a>
                        </div>
                    </div>
                    <ul>
                        <!–
                            <li>
                             <div id=”singing”>
                             <form class=”songVoice”>
                             <div>
                             <img src=”../images/sign09.png”>
                             </div>
                             <input type=”range” max=”1″ min=”0″ value=”0″ step=”0.1″ id=”rg”>
                             <img src=”../images/sign10.png”>
                             </form>
                             <div class=”songTip”>
                             <h2>喜欢你</h2>
                             <p>— G.E.M. 邓紫棋 —</p>
                             </div>
                             <div class=”songTime”>
                             <div class=”curTime”>0.00</div>
                             <div class=”progress”>
                             <div class=”progressIn”></div>
                             <div class=”btnCtrl”></div>
                             </div>
                             <div class=”totalTime”>0000</div>
                             </div>
                             </div>
                             <div id=”singFooter”>
                             <div class=”singerImg”>
                             <img src=”../images/pic02.png”>
                             </div>
                             <div class=”prevSong”>
                             <img src=”../images/sign05.png”>
                             </div>
                             <audio id=”singPlayer” class=”player”>
                             </audio>
                             <div class=”favorite”>
                             <img src=”../images/sign07.png”>
                             </div>
                             <div class=”nextSong”>
                             <img src=”../images/sign06.png”>
                             </div>
                             </div>
                             </li>
                        –>
                    </ul>
                </div>
                <div id=”footer”>
                    <div class=”singerImg”>
                        <img src=”../images/pic02.png” />
                    </div>
                    <div class=”prevSong”>
                        <img src=”../images/sign05.png” />
                    </div>
                    <div id=”player” class=”paused”></div>
                    <div class=”favorite”>
                        <img src=”../images/sign07.png” />
                    </div>
                    <div class=”nextSong”>
                        <img src=”../images/sign06.png” />
                    </div>
                </div>
            </div>
            <div id=”user”>
                <div id=”userManage”>
                    <img src=”../images/pic03.png” />
                    <div>
                        <h2>点击头像登陆</h2>
                        <p>共收藏<span>0</span>首歌曲</p>
                    </div>
                </div>
                <ul id=”userItems”>
                    <li><a href=”#” class=”userItem01″>扫面歌曲</a></li>
                    <li><a href=”#” class=”userItem02″>顺序播放</a></li>
                    <li><a href=”#” class=”userItem03″>音效</a></li>
                    <li><a href=”#” class=”userItem04″>换皮肤</a></li>
                    <li><a href=”#” class=”userItem05″>换背景</a></li>
                    <li><a href=”#” class=”userItem06″>睡眠</a></li>
                    <li><a href=”#” class=”userItem07″>设置</a></li>
                    <li><a href=”#” class=”userItem08″>退出</a></li>
                </ul>
            </div>
        </div>
    </body>
    <script src=”../js/index.js”></script>
</html>

css 代码

html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
    margin: 0;
    padding: 0;
}
img {
    border: none;
}
ul,
li {
    list-style: none;
}
input {
    border: none;
    outline: none;
}
body {
    font-family: ‘微软雅黑’, ‘Arial’;
    font-size: 12px;
}
a {
    text-decoration: none;
}
#container {
    position: relative;
    width: 640px;
    height: 960px;
    overflow: hidden;
    margin: 30px auto;
}
#header {
    width: 640px;
    height: 40px;
    background: #000;
}
#header .signal {
    width: 40px;
    height: 20px;
    float: left;
    margin-left: 8px;
}
#header .time {
    width: 100px;
    margin-top: 10px;
    height: 20px;
    font: bold 20px/20px ‘微软雅黑’;
    margin-left: 220px;
    color: #ddd;
    float: left;
}
#header .pic {
    width: 180px;
    height: 40px;
    float: right;
}
#header .signal li {
    width: 6px;
    background: #ddd;
    margin-top: 9px;
    border-right: 2px solid #000;
    float: left;
}
#header .signal li + li {
}
#header .signal .signLi01 {
    border-top: 12px solid #000;
    height: 8px;
}
#header .signal .signLi02 {
    border-top: 10px solid #000;
    height: 10px;
}
#header .signal .signLi03 {
    border-top: 7px solid #000;
    height: 13px;
}
#header .signal .signLi04 {
    border-top: 4px solid #000;
    height: 16px;
}
#header .signal .signLi05 {
    height: 20px;
}
#content {
    position: absolute;
    top: 40px;
    left: 0;
    width: 640px;
    height: 920px;
    background: url(../images/pic01.png);
    overflow: hidden;
    z-index: 10;
    display: block;
}
#content #myCollect {
    overflow: hidden;
    display: block;
}
#content #mySinging {
    overflow: hidden;
    display: none;
}
#content #nav {
    width: 640px;
    height: 66px;
    background: #3e5656;
    padding-top: 23px;
    opacity: 0.7;
    filter: alpha(opacity=70);
    border-top: 2px solid #033347;
    border-bottom: 1px solid #000;
}
#content #nav .title {
    width: 250px;
    height: 45px;
    float: left;
    overflow: hidden;
    margin-left: 20px;
}
#content #nav .title img {
    float: left;
}
#content #nav .title h2 {
    float: left;
    font: 34px/41px ‘微软雅黑’;
    color: #fff;
    text-indent: 20px;
}
#content #nav .search {
    width: 44px;
    height: 45px;
    margin-right: 46px;
    float: right;
}
#content #nav .network {
    width: 44px;
    height: 45px;
    margin-right: 32px;
    float: right;
}
#content #items {
    width: 640px;
    height: 727px;
    border-top: 1px solid #25666c;
}
#content #items li {
    width: 640px;
    height: 102px;
    color: #fff;
    border-bottom: 1px solid #fff;
}
#content #items li > h2 {
    width: 90px;
    text-align: center;
    font: 28px/102px ‘微软雅黑’;
    float: left;
}
#content #items li > div {
    width: 400px;
    height: 82px;
    padding: 10px 0;
    float: left;
}
#content #items li > div > h3 {
    font: 20px/42px ‘微软雅黑’;
}
#content #items li > div > p {
    font: 20px/40px ‘微软雅黑’;
}
#content #items li > img {
    margin-top: 34px;
    margin-right: 40px;
    width: 29px;
    float: right;
}
#content #items .progress {
    width: 640px;
    height: 3px;
    background: #91d300;
}
#content #mySinging #singNav {
    width: 640px;
    height: 66px;
    background: #3e5656;
    padding-top: 23px;
    opacity: 0.7;
    filter: alpha(opacity=70);
    border-top: 2px solid #033347;
    border-bottom: 1px solid #000;
}
#content #mySinging #singNav .title {
    width: 250px;
    height: 45px;
    float: left;
    overflow: hidden;
    margin-left: 20px;
}
#content #mySinging #singNav .title img {
    float: left;
}
#content #mySinging #singNav .title h2 {
    float: left;
    font: 34px/41px ‘微软雅黑’;
    color: #fff;
    text-indent: 20px;
}
#content #mySinging #singNav .search {
    width: 44px;
    height: 45px;
    margin-right: 46px;
    float: right;
}
#content #mySinging #singNav .network {
    width: 44px;
    height: 45px;
    margin-right: 32px;
    float: right;
}
#content #mySinging #singing {
    width: 640px;
    height: 727px;
    border-top: 1px solid #25666c;
}
#content #mySinging #singing .songVoice {
    width: 580px;
    height: 30px;
    background: #000;
    opacity: 0.7;
    overflow: hidden;
    filter: alpha(opacity=70);
    margin: 50px auto;
}
#content #mySinging #singing .songVoice input {
    width: 485px;
    height: 30px;
    border: none;
    line-height: 30px;
    float: left;
    display: block;
}
#content #mySinging #singing .songVoice > div {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    float: left;
    display: block;
}
#content #mySinging #singing .songVoice > div > img {
    width: 30px;
    height: 30px;
}
#content #mySinging #singing .songVoice > img {
    width: 40px;
    margin-left: 10px;
    height: 30px;
    float: right;
    display: block;
}
#content #mySinging #singing .songTip {
    width: 580px;
    height: 100px;
    margin-top: 350px;
    margin-left: 30px;
}
#content #mySinging #singing .songTip h2 {
    width: 580px;
    text-align: center;
    font: 28px/60px ‘微软雅黑’;
    color: #fff;
}
#content #mySinging #singing .songTip p {
    text-align: center;
    width: 580px;
    font: 24px/40px ‘微软雅黑’;
    color: #fff;
}
#content #mySinging #singing .songTime {
    width: 580px;
    height: 40px;
    overflow: hidden;
    margin: 30px auto;
}
#content #mySinging #singing .songTime .curTime {
    float: left;
    margin: 7px 0px;
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
}
#content #mySinging #singing .songTime .totalTime {
    float: right;
    margin: 7px 0px;
    width: 50px;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
}
#content #mySinging #singing .songTime .songProgress {
    float: left;
    width: 440px;
    height: 4px;
    margin: 19px 20px;
    background-color: gray;
    position: relative;
}
#content #mySinging #singing .songTime .progressIn {
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: orange;
}
#content #mySinging #singing .songTime .btnCtrl {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    left: 0;
    top: -8px;
    background-color: #fff;
}
#content #footer {
    border-top: 1px solid #4b5868;
    background: #02223b;
    width: 640px;
    height: 97px;
}
#content #footer .singerImg {
    margin-top: 18px;
    margin-left: 30px;
    width: 60px;
    height: 60px;
    float: left;
}
#content #footer .prevSong {
    width: 45px;
    height: 30px;
    margin-top: 33px;
    margin-left: 60px;
    float: left;
}
#content #footer .paused {
    float: left;
    width: 0;
    height: 0;
    border-left: 25px solid #fff;
    border-top: 25px solid rgba(0, 0, 0, 0);
    border-bottom: 25px solid rgba(0, 0, 0, 0);
    margin: 23px 122px;
}
#content #footer .player {
    float: left;
    margin: 23px 122px;
    width: 10px;
    height: 50px;
    border-left: 8px solid #fff;
    border-right: 8px solid #fff;
}
#content #footer .nextSong {
    width: 45px;
    height: 30px;
    margin-top: 33px;
    margin-right: 60px;
    float: right;
}
#content #footer .favorite {
    width: 41px;
    height: 30px;
    float: right;
    margin-top: 33px;
    margin-right: 30px;
}
#user {
    position: absolute;
    top: 40px;
    width: 640px;
    height: 920px;
    background: #343434;
    overflow: hidden;
    display: block;
    z-index: 1;
}
#user #userManage {
    width: 640px;
    height: 78px;
    padding-top: 12px;
    border-bottom: 1px solid #2d2d2d;
}
#user #userManage img {
    width: 60px;
    height: 60px;
    margin-left: 24px;
    float: left;
}
#user #userManage > div {
    width: 200px;
    height: 60px;
    text-indent: 18px;
    color: #fff;
    float: left;
}
#user #userManage > div h2 {
    font: 22px/34px ‘宋体’;
    margin-bottom: 6px;
}
#user #userManage > div p {
    font: 18px/20px ‘宋体’;
    color: #cdcdcd;
}
#user #userItems {
    width: 640px;
    overflow: hidden;
}
#user #userItems li {
    width: 640px;
    height: 68px;
    font: 22px/68px ‘宋体’;
    color: #fff;
    display: block;
    border-top: 1px solid #5e5e5e;
    border-bottom: 1px solid #2d2d2d;
}
#user #userItems li a {
    position: relative;
    width: 608px;
    margin-left: 32px;
    text-indent: 58px;
    height: 68px;
    font: 22px/68px ‘宋体’;
    color: #fff;
    display: block;
}
#user #userItems li:hover {
    background: #249eb6;
}
#user #userItems .userItem01 {
    background: url(../images/sign08.png) no-repeat 0 0;
}
#user #userItems .userItem02 {
    background: url(../images/sign08.png) no-repeat 0 -70px;
}
#user #userItems .userItem03 {
    background: url(../images/sign08.png) no-repeat 0 -140px;
}
#user #userItems .userItem04 {
    background: url(../images/sign08.png) no-repeat 0 -210px;
}
#user #userItems .userItem05 {
    background: url(../images/sign08.png) no-repeat 0 -280px;
}
#user #userItems .userItem06 {
    background: url(../images/sign08.png) no-repeat 0 -350px;
}
#user #userItems .userItem07 {
    background: url(../images/sign08.png) no-repeat 0 -420px;
}
#user #userItems .userItem08 {
    background: url(../images/sign08.png) no-repeat 0 -490px;
}

json 代码

;[
    {
        id: ‘1’,
        item: ‘../assets/G.E.M. 邓紫棋 – 喜欢你 (Live).mp3’,
        song: ‘喜欢你（Live）’,
        singer: ‘G.E.M.邓紫棋’,
    },
    {
        id: ‘2’,
        item: ‘../assets/那英 – 出卖.mp3’,
        song: ‘出卖’,
        singer: ‘那英’,
    },
    {
        id: ‘3’,
        item: ‘../assets/贾乃亮 – 大王叫我来巡山.mp3’,
        song: ‘大王叫我来巡山’,
        singer: ‘贾乃亮’,
    },
    {
        id: ‘4’,
        item: ‘../assets/那英 – 相爱恨早.mp3’,
        song: ‘相爱恨早’,
        singer: ‘那英’,
    },
    {
        id: ‘5’,
        item: ‘../assets/卓依婷 – 单身情歌.mp3’,
        song: ‘单身情歌’,
        singer: ‘卓依婷’,
    },
    {
        id: ‘6’,
        item: ‘../assets/吴奇隆 (Nicky Wu) – 祝你一路顺风.mp3’,
        song: ‘祝你一路顺风’,
        singer: ‘吴奇隆’,
    },
    {
        id: ‘7’,
        item: ‘../assets/那英 – 只要有你.mp3’,
        song: ‘只要有你’,
        singer: ‘那英’,
    },
]

javascript 代码

/**
* Created by Administrator on 2016/10/6.
*/
$(function() {
    var flag = true
    /*
自制的打印系统时间函数工具
*/
    function time(date) {
        var hours = date.getHours() //时
        var minutes = date.getMinutes() //分
        if (hours > 12) {
            var result = hours + ‘:’ + minutes + ‘ PM’
        } else {
            var result = hours + ‘:’ + minutes + ‘ AM’
        }
        return result
    }
    /*
自制的音乐播放函数工具
*/
    function playerFn() {
        var audio = document.querySelector(‘#audio’)
        var curTime = document.querySelector(‘.curTime’)
        var totalTime = document.querySelector(‘.totalTime’)
        var progress = document.querySelector(‘.songProgress’)
        var progressIn = document.querySelector(‘.progressIn’)
        var btnCtrl = document.querySelector(‘.btnCtrl’)
        var collect = document.querySelector(‘.collect’)
        // step2: 获取当前的播放时间和总的视频长度
        audio.ontimeupdate = function() {
            var num1 = Math.floor(audio.duration / 60)
            var num2 = Math.floor(audio.duration % 60)
            var cnum1 = Math.floor(audio.currentTime / 60)
            var cnum2 = Math.floor(audio.currentTime % 60)
            curTime.innerText = cnum1 + ‘:’ + cnum2
            totalTime.innerText = num1 + ‘:’ + num2
            var scale = audio.currentTime / audio.duration
            progressIn.style.width = progress.offsetWidth * scale + ‘px’
            btnCtrl.style.left =
                progress.offsetWidth * scale – btnCtrl.offsetWidth / 2 + ‘px’
        }
        // step3: 声音初始化获取及当前声音大小改变操作
        var rd = document.querySelector(‘#rg’)
        rd.value = audio.volume
        rd.onchange = function() {
            audio.volume = rd.value
        }
    }
    /*
头部时间显示定时器
*/
    setInterval(function() {
        var now = new Date()
        $(‘#header>.time’).html(time(now))
    }, 1000)
    /*
头部箭头显示侧滑
*/
    $(‘.title>a>.ceHua’).click(function() {
        if (flag == true) {
            $(‘#content’)
                .css({
                    left: 0,
                })
                .animate(
                    {
                        left: $(‘#content’).width() / 2,
                    },
                    600,
                )
            flag = false
        } else {
            $(‘#content’)
                .css({
                    left: $(‘#content’).width() / 2,
                })
                .animate(
                    {
                        left: 0,
                    },
                    600,
                )
            flag = true
        }
    })
    $(‘.title>a>.collect’).click(function() {
        $(‘#myCollect’).show()
        $(‘#mySinging’).hide()
    })
    var index = 0
    $.get(‘../json/songs.json’, function(data) {
        var html = ”
        var html01 = ”
        $.each(data, function(i, o) {
            html +=
                ‘<li>’ +
                ‘<h2>’ +
                o.id +
                ‘</h2>’ +
                ‘<div>’ +
                ‘<h3>’ +
                o.song +
                ‘</h3>’ +
                ‘<p>’ +
                o.singer +
                ‘</p>’ +
                ‘</div>’ +
                ‘<img src=”../images/sign04.png”>’ +
                ‘</li>’
        })
        $(‘#items>ul’).html(html)
        $(‘#items>ul>li’).click(function() {
            $(‘#mySinging>ul’).html(”)
            var $index = $(this).index()
            $(‘#myCollect’).hide()
            $(‘#mySinging’).show()
            $.each(data, function(i, o) {
                if (i == $index) {
                    html01 =
                        ‘<li>’ +
                        ‘<div id=”singing”>’ +
                        ‘<form class=”songVoice”>’ +
                        ‘<div><img src=”../images/sign09.png”></div>’ +
                        ‘<input type=”range” max=”1″ min=”0″ value=”0″ step=”0.1″ id=”rg”>’ +
                        ‘<img src=”../images/sign10.png”>’ +
                        ‘</form>’ +
                        ‘<div class=”songTip”><h2>’ +
                        o.song +
                        ‘</h2><p>— ‘ +
                        o.singer +
                        ‘ —</p></div>’ +
                        ‘<div class=”songTime”>’ +
                        ‘<div class=”curTime”>0.00</div>’ +
                        ‘<div class=”songProgress”>’ +
                        ‘<div class=”progressIn”></div>’ +
                        ‘<div class=”btnCtrl”></div>’ +
                        ‘</div>’ +
                        ‘<div class=”totalTime”>0000</div>’ +
                        ‘</div>’ +
                        ‘</div>’ +
                        ‘<audio id=”audio” src=”‘ +
                        o.item +
                        ‘” autoplay=”autoplay” >’ +
                        ‘</audio>’ +
                        ‘</li>’
                }
            })
            $(‘#mySinging>ul’).html(html01)
            index = $index
            var player = document.querySelector(‘#player’)
            var audio = document.querySelector(‘#audio’)
            player.className = ‘player’
            // step1: 如何判断当前的视频是否正在播放
            player.addEventListener(‘click’, function() {
                if (audio.paused) {
                    player.className = ‘player’
                    audio.play() // audio.play()播放视频
                } else {
                    player.className = ‘paused’
                    audio.pause()
                }
            })
            playerFn()
        })
    })
})
前端开发棋牌游戏
游戏开发是属于前端还是后端
前端与游戏程序开发哪一个好
赞(0)
前端开发者 » 前端开发一款自制移动端音乐播放器
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论