css怎样添加音乐,给博客空间添加CSS3音乐播放器的例子

CSS3音乐播放器可以实现加载外部音乐地址然后在博客或空间中直接播放音乐了，这个效果在许多个人博客会有看到，我们下面来看配置方法。

这是一个很简单的播放器效果，界面主要利用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;

width: 55px;

height: 55px;

border-radius: 100%;

position: relative;

}

.myMusic:after{

display: block;

content: '\f001';

width: 55px;

height: 55px;

font-family: 'FontIcon';

text-align: center;

font-size: 25px;

line-height: 55px;

position: absolute;

top: 0;

left: 0;

}

.myMusic .circle{

display: block;

width: 50px;

height: 50px;

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();

}