美文网首页
原生JS手写简单的本地音乐播放器

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

作者: 胡渣的渣 | 来源:发表于2019-01-20 03:45 被阅读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>

相关文章

网友评论

      本文标题:原生JS手写简单的本地音乐播放器

      本文链接:https://www.haomeiwen.com/subject/jxwtjqtx.html