JS+html5制作简单音乐播放器
2017-03-30 08:40
746 查看
本教程为大家分享了JS音乐播放器的具体代码,供大家参考,具体内容如下
1.HTML
<audio> 标签定义声音,比如音乐或其他音频流。其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮。
几个主要的标签如下:
<div> <h4 id="name">李玉刚 - 刚好遇见你</h4> <br> <audio id="audio" src="F:\KuGou\李玉刚 - 刚好遇见你.mp3 " controls></audio><br/> </div> <br><br> <div> <button id="btn-play" >播放</button> <button id="btn-stop" >暂停</button> <button id="btn-pre" >上一首</button> <button id="btn-next" >下一首</button> </div> </div>
这里不提供CSS样式,只做功能说明。
2.js
var btn1 = document.getElementById("btn-play"); btn1.onclick = function(){ if(audio.paused){ audio.play(); } } <!--暂停--> var btn2 = document.getElementById("btn-stop"); btn2.onclick = function(){ if(audio.played){ audio.pause(); } } var music = new Array(); music = ["李玉刚 - 刚好遇见你","张杰 - 三生三世","朴树 - 平凡之路"];//歌单 var num = 0; var name = document.getElementById("name"); <!--上一首--> var btn3 = document.getElementById("btn-pre"); btn3.onclick = function(){ num = (num +2)%3; audio.src = "music/"+music[num]+".mp3"; name.innerHTML = music[num]; audio.play(); } <!--下一首--> var btn4 = document.getElementById("btn-next"); btn4.onclick = function(){ num = (num +1)%3; audio.src = "music/"+music[num]+".mp3"; name.innerHTML = music[num]; audio.play(); }
这样就可以控制audio播放器的播放,暂停,上一首和下一首功能了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- js制作简单的音乐播放器
- 用JS+Html5实现一个简单的音乐播放器
- js制作简单的音乐播放器的示例代码
- js制作日历1----------简单的日历
- js简单制作一个时钟
- 原生Js基于HTML5 FileReader&canvas制作的banner广告图片插件
- android 音乐播放器制作 之 Tabhost 简单使用(一)
- 用Html5制作简单的6列自适应布局
- WindowsPhone 8 音频播放代理制作简单音乐播放器
- [译]怎样用HTML5 Canvas制作一个简单的游戏
- 自己写的HTML5 canvas动画制作函数,非常简单易懂
- #HTML5 & JS TIPS# 合法解决纯JS+HTML5前端简单跨域与复杂跨域问题
- js正则实现的密码框简单制作,还可以替换成自己想用得符号
- 使用impress.js模板制作的HTML5网页幻灯片
- JS控制滚动条 —— 进度条的简单制作
- 学习网站整理之3——html5学习之简易音乐播放器制作
- html5 简单的弹弹球制作
- JS制作简单的日历控件【JS Date对象操作实例演示】
- android 音乐播放器制作 之 Tabhost 简单使用(二)
- [JavaScript] JS+CSS 制作超级简单的下拉菜单