原生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