html制作在线视频音乐播放器,用html5制作音乐播放器，这3款就足够了！
用HTML5结合Jquery做一个简易版的音乐播放器
代码展示：
三生草var sum = 1;
function ssss(a)
{
var s = document.getElementById('sd');
sum = a;
s.src = 'music/'+sum+'.mp3';
s.play();
$('#mar')[0].innerText = '当前播放：'+$('td:eq('+(sum-1)+')')[0].innerText;
s.onended = function(){
s.src = 'music/'+sum+'.mp3';
sum++;
if(sum == 15){sum = 1;}
s.play();
$('#mar')[0].innerText = '当前播放：'+$('td:eq('+(sum-1)+')')[0].innerText
}
}
function ststs(b)
{
if(b==2)
{
if($('#sse')[0].value=='播放')
{
$('#sse')[0].value='停止';
var s = document.getElementById('sd');
s.pause();
}
else
{
$('#sse')[0].value='播放';
ssss(sum);
}
}
if(b==1)
{
sum--;
if(sum==0){sum=15;}
ssss(sum);
}
if(b==3)
{
sum++;
if(sum==16){sum=1;}
ssss(sum);
}
}
我的音乐播放器
| < a href='' οnclick='ssss('1')'>panda猫 - 想你.m4a a> | < a href='' οnclick='ssss('2')'>Sara - 即使知道要见面.mp3 a> |
| < a href='' οnclick='ssss('3')'>The Collective - Last Christmas.mp3 a> | < a href='' οnclick='ssss('4')'>爱情专属权-龙梅子.mp3 a> |
| < a href='' οnclick='ssss('5')'>爱人爱人在哪里-马吟吟.mp3 a> | < a href='' οnclick='ssss('6')'>安琥-会有天使替我爱你.mp3 a> |
| < a href='' οnclick='ssss('7')'>安琥-天使的翅膀.mp3 a> | < a href='' οnclick='ssss('8')'>别用下辈子安慰我-陈瑞.mp3 a> |
| < a href='' οnclick='ssss('9')'>陈楚生 - 有没有人曾告诉你.mp3 a> | < a href='' οnclick='ssss('10')'>陈淑桦 - 梦醒时分.mp3 a> |
| < a href='' οnclick='ssss('11')'>丁当 - 手掌心.mp3 a> | < a href='' οnclick='ssss('12')'>金贵晟 - 虹之间.mp3 a> |
| < a href='' οnclick='ssss('13')'>马健南-马航去的地方.mp3 a> | < a href='' οnclick='ssss('14')'>满江 - 飞鸟. mp3 a> |
| < a href='' οnclick='ssss('15')'>不是因为寂寞才想你-雷婷 a> |
用audio标签做的MP3播放器
?
代码展示：
Documentbutton{
width: 40px;
/* 宽 */
height: 40px;
/* 高 */
background: #3c88dd;
/* 背景色 */
border:none;
/* 去掉边框 */
color: white;
/* 字的颜色 */
border-radius: 50%;
/* 50%的圆角 */
cursor: pointer;
/* 鼠标悬在上时为手形 */
transition: 0.5s;
/* 变化过渡，配合hover用 */
}
button:hover{
/* 鼠标悬在上时背景变色 */
background: #750f0f;
}
播放
暂停
var ebtplay = document.querySelector('#btplay');
var ebtpause = document.querySelector('#btpause');
var emymp3 = document.querySelector('#mymp3');
ebtplay.onclick = function () {
emymp3.play();
};
ebtpause.onclick = function () {
emymp3.pause();
}
html5+原生js制作一个简易音乐播放器
代码展示：html
播放器练习- 孤身
- 花香
- 这一生关于你的风景
css
*{
margin: 0;
padding: 0;
}
#container{
width: 350px;
height: 500px;
background-color: cornflowerblue;
margin: auto;
/* opacity:0.1; */
}
#player{
height: 100px;
width: 350px;
background-color: rgb(30, 108, 172);
}
#player audio{
margin: 20px 20px 0px 20px;
}
#buttons{
width: 150px;
height: 20px;
margin-left: 80px;
display: inline-block;
}
#btpre{
float: left;
margin-right: 40px;
}
#next{
float: right;
}
#list ul{
text-align: center;
list-style-type: none;
}
#list li{
width: 350px;
height: 35px;
line-height: 35px;
border-bottom:1px solid white ;
cursor: pointer;
}
.play{
background-color: rgb(150, 177, 228) ;
color: white;
font-size: bold;
}js
window.onload = function () {
var btnPre = document.getElementById('btpre');
var btnNext = document.getElementById('next');
var list = document.getElementById('list');
var aud = document.getElementById('aud');
var li = list.getElementsByTagName('li');
var mymusic = ['./music/孤身.mp3', './music/花香.mp3', './music/这一生关于你的风景.mp3'];//把地址存在一个数组里
//点击播放
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
for (var i = 0; i < li.length; i++) {
if (this == li[i]) {
li[i].className = 'play';
aud.src = mymusic[i];
aud.play();
} else {
li[i].className = '';
}
}
}
}
//获取正在播放的音乐
function getPlay() {
for (var r = 0; r < li.length; r++) {
if (li[r].getAttribute('class') == 'play') {
return r;
}
}
}
//循环播放
aud.onended = function () {
var a = getPlay();
a++;
if (a > li.length - 1) {
a = 0;
}
for (var j = 0; j < li.length; j++) {
li[j].className = '';
}
aud.src = mymusic[a];
aud.play();
li[a].className = 'play';
}
//下一首
btnNext.onclick = function () {
var musicIndex = getPlay();
if (musicIndex == li.length - 1) {//判断是否为最后一首，然后循环播放
musicIndex = -1;
}
aud.src = mymusic[musicIndex + 1];//切换到下一首
aud.play();
for (var j = 0; j < li.length; ++j) {
li[j].className = '';
}
li[musicIndex + 1].className = 'play';
}
//上一首
btnPre.onclick = function () {
var musicIndex = getPlay();
if (musicIndex == 0) {//判断是否为第一首，然后循环播放
musicIndex = li.length;
}
aud.src = mymusic[musicIndex - 1];//切换到上一首
aud.play();
for (var j = 0; j < li.length; ++j) {
li[j].className = '';
}
li[musicIndex - 1].className = 'play';
}
}目录
这3款H5播放器，可以为大家学习HTML文本语言提供帮助，希望对大家有所帮助，大家如有需要代码，关注公众号平台代码即可获取下载链接。技术交流联盟