原生JS手写简单的本地音乐播放器

2019-01-20  本文已影响0人  胡渣的渣

1.贴一下最终图,只做了功能,css部分就不做了

效果图.jpg

2.HTML部分

<table>
    <thead>
        <tr>
            <th>歌曲</th>
            <th>歌手</th>
            <th>时长</th>
        </tr>               
    </thead>
    <tbody id="playList">
    </tbody>
</table>
<audio  id="myAuido">
    <source src="img/广东爱情故事.mp3"></source>
</audio>
<button id="isPlay">播放/暂停</button>
音量<input type="range" min="0" max="100" id="voice" value="100"/>
进度<input type="range" min="0" max="100" id="current" value="0"/>
当前播放歌曲是:<span id="playNowMusic" style="color: red;"></span>
<span id="nowTime">00:00</span><span>/</span><span id="totalTime">00:00</span>
<br />
<button id="premusic">上一首</button>
<button id="nextmusic">下一首</button>
<form action="" method="get" id="playModeForm"> 
    播放模式<br />
    <label><input name="playMode" type="radio" value="oneplay"  checked="checked"/>单曲播放 </label> 
    <label><input name="playMode" type="radio" value="listplay" />列表播放</label> 
    <label><input name="playMode" type="radio" value="randomplay" />随机播放 </label> 
</form>
上一篇 下一篇

猜你喜欢

热点阅读