原生js实现音乐播放界面

最新推荐文章于 2024-05-13 16:33:00 发布

lzz_1234

最新推荐文章于 2024-05-13 16:33:00 发布

阅读量1.6k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/lzz_1234/article/details/89499971

版权

原生js实现音乐播放界面

做了一个播放界面，感觉还挺复杂的，记录一下过程。
在这里插入图片描述
1、首先先做静态的HTML界面。分析界面结构，一张背景图片，其他的小图标都是用iconfont做的。因为对iconfont的使用不太熟悉，所以代码量较大。关于iconfont的使用，我是在iconfont矢量库下载后，有一个HTML的文档，按照上面指示做的。

HTML代码

<body>
<div class="big">
    <!-- 背景图片 -->
    <div class="bg"><img src="images/index.jpg" alt="">
        <!-- 音乐播放 -->
        <audio id="mym"></audio>
        <!-- 音乐播放 end -->
         <div class="jindu">
            <!-- 歌曲名字 -->
             <div class="clearfix">
                 <span class="mname" id="mname">xxxxx</span>
                 <span class="totalTime" id="totalTime">00:00:00</span>
                 <span class="xian">/</span>
                 <span class="current" id="current">00:00:00</span>
             </div>
            <!-- 歌曲名字 end -->
            <!-- 进度条 -->
            <div class="jindu_bg" id="jindu_bg">
                <div class="jindu_color" id="jindu_color">
                </div>
            </div>
         </div>
        <!-- 进度条 end -->

    <!-- 控制区 -->
        <!-- 播放图标 -->
            <svg class="icon play" id="play" aria-hidden="true">
                <use  xlink:href="#iconplay"></use>
            </svg>
        <!-- 播放图标 end -->

        <!-- 上一首图标 -->
        <svg class="icon rewind" id="rewind" aria-hidden="true">
            <use xlink:href="#iconrewind"></use>
        </svg>
        <!-- 上一首图标 end -->

        <!-- 下一首图标 -->
        <svg class="icon forward" id="forward" aria-hidden="true">
            <use xlink:href="#iconforward"></use>
        </svg>
        <!-- 下一首图标 end -->

        <!-- 音量图标 -->
        <svg class="yinliang icon" id="yinliang" aria-hidden="true">
            <use xlink:href="#iconyinliang">
                <div class="yinliangt" id="yinliangt">
                    <svg class="jy icon" id="jy" aria-h

最低0.47元/天解锁文章

lzz_1234

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
原生js实现音乐播放界面

原生js实现音乐播放界面做了一个播放界面，感觉还挺复杂的，记录一下过程。1、首先先做静态的HTML界面。分析界面结构，一张背景图片，其他的小图标都是用iconfont做的。因为对iconfont的使用不太熟悉，所以代码量较大。关于iconfont的使用，我是在iconfont矢量库下载后，有一个HTML的文档，按照上面指示做的。HTML代码<body><div cla...
复制链接

扫一扫

专栏目录