前端----利用html,css,js自制有趣的音乐播放器

最近在学前端，然后做了一个简易的音乐播放器，原本只是一个静态的网页，用a标签实现链接，embed标签引入mv，audio标签实现音乐播放，右边的marquee标签实现歌词滚动但是总觉得还不够，就加上了js用按钮可以同时控制音乐的播放以及旁边歌词的滚动，发现挺有趣的，话不多说，先上图：


以下是主要代码：

    <div class="contanier">
        <div class="left">
            <div class="left_top">
                <a href="https://baike.baidu.com/item/%E9%98%BF%E8%82%86/5857519" target="_self"><img src="images\author.png" width="100%" height="340px" title="阿肆,郭采洁海报">a>
            div>
            <div class="left_bottom">
                <ul type="none">

                    <li><a href="https://baike.baidu.com/item/%E9%98%BF%E8%82%86/5857519 " target="_self">作者：阿肆a>li>
                    <li><a href="http://www.yue365.com/getgeci/17091/403730.shtml" target="_self">歌    词a>li>
                    <li style="margin-bottom:10px;"><a href="mv.html" target="_self">播放MVa>li>
                    <li> <audio id="audio" src="audio\阿肆、郭采洁+-+世界上的另一个我.mp3" autoplay>audio>li>
                    <input id="btn" value="播           放" readonly="readonly">input>

                ul>
            div>
        div>
        <div class="right">
            <marquee id="marquee" float="left" width="350x" height="500px" direction="up" scrollamount="1" this.stop()>
                <font face="heiti" size="4" color="black">
                    <ul type="none">
                        <li>世界上另一个我（Live） - 许凯&白鹿li>

                        <li>作词：阿肆 作曲：阿肆li>

                        <li style="padding-top:20px">上一秒我在台北看烟火li>

                        <li>下一秒你在上海喝Mojitoli>

                        <li>你感觉我就像我感觉你li>

                        <li>世界上的另一个我li>

                        <li>上一秒我在柏林落大雨li>

                        <li>下一秒你在曼谷天气晴li>

                        <li>你感受我就像我感受你li>

                        <li>世界上的另一个我li>

                        <li>人生到处是假正经li>

                        <li>变幻莫测捕风捉影li>

                        <li>有几个陪我等雨停li>

                        <li>难得真性情li>

                        <li>天高海阔我的渊明谁倾听li>

                        <li>岁月为我大浪淘沙li>

                        <li>而你被留下li>

                        <li>我的世界流转变化li>

                        <li>你却没时差li>

                        <li>啦啦啦啦我亲爱的你呀li>

                        <li>岁月待我晴雨交加li>

                        <li>而你被孵化li>

                        <li>我的心事纷乱复杂li>

                        <li>你却能解码li>

                        <li>啦啦啦啦我亲爱的你呀li>

                        <li>我们并非单枪匹马li>

                        <li>世界那么大li>

                        <li>风尘仆仆我会化作li>

                        <li>天边的晚霞li>

                        <li>啦啦啦啦我与你同在啊li>

                        <li>啦啦啦啦我与你同在啊li>

                        <li>啦啦啦啦我与你同在啊li>
                    ul>
                font>
            marquee>
        div>
    div>

css: