这是一个很简单的播放器效果,界面主要利用CSS3的一些属性,如animate、translate、transform等,效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能,如需实现诸如酷狗音乐的播放器效果,请深入研究Audio。个人认为,该播放器足以满足博客等非音乐网站的需求。当然,诸如以往,以上包括这句都是废话:)
关于Audio
audio标签定义声音,比如音乐或其他音频流。支持HTML5中的全局属性和事件属性。可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。如:
您的浏览器不支持 audio 标签。
1
属性 值 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src url 要播放的音频的 URL。
以上内容,你都可以在w3school看到,而以下内容,你只能在这里看到了(^-^)V
HTML结构
CSS样式
.myMusic{
display: block;
border-radius: 100%;
position: relative;
}
.myMusic:after{
display: block;
content: 'f001';
font-family: 'FontIcon';
text-align: center;
font-size: 25px;
line-
position: absolute;
top: 0;
left: 0;
}
.myMusic .circle{
display: block;
border-radius: 100%;
border: 5px solid rgba(0,0,0,0);
border-top-color: #78dc1e;
border-bottom-color: #78dc1e;
position: absolute;
left: 0;
box-shadow: 0 0 35px #6ffe11;
}
.play{
-webkit-animation: Circle 1s ease-in-out infinite;
animation: Circle 1s ease-in-out infinite;
}
.pause{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes Circle {
from{ -webkit-transform: rotate(0deg); }
to{-webkit-transform: rotate(360deg);}
}
@keyframes Circle {
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
JAVASCRIPT
//音乐路径
var musicSrc = 'http://yinyueshiting.baidu.com/data2/music/134379562/10494647255600128.mp3?xcode=f9439132fa6a4fdb3143226ac1c6712284958927e6b1be18';
var audio = null;
function setAudio(){
audio = document.createElement('audio');
audio.src = musicSrc;
if(!audio){
audio.load(); //加载音乐
}else{
audio.play();
audio.loop = true; //循环播放
}
}
var musicBtn = $('.myMusic');
var $music = musicBtn.find('.circle');
//控制
musicBtn.off().on('click',function(){
if($music.hasClass('play')){ //如果已经播放,则暂停
audio && (audio.pause());
$music.addClass('pause').removeClass('play');
}else{
audio && (audio.play());
$music.addClass('play').removeClass('pause');
}
});
//页面加载后执行
window.onload = function(){
setAudio();
}