美文网首页
原生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