用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播放器

?

代码展示：

Document

button{

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文本语言提供帮助，希望对大家有所帮助，大家如有需要代码，关注公众号平台代码即可获取下载链接。技术交流联盟