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

这是一个很简单的播放器效果，界面主要利用CSS3的一些属性，如animate、translate、transform等，效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能，如需实现诸如酷狗音乐的播放器效果，请深入研究Audio。个人认为，该播放器足以满足博客等非音乐网站的需求。当然，诸如以往，以上包括这句都是废话：）
关于Audio

audio标签定义声音，比如音乐或其他音频流。支持HTML5中的全局属性和事件属性。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。如：

<audio src="someaudio.wav">

您的浏览器不支持 audio 标签。
</audio>1

属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
以上内容，你都可以在w3school看到，而以下内容，你只能在这里看到了(＾－＾)V
HTML结构

<a class="myMusic" title="让我们荡起双桨">
    <span class="circle play"></span>
</a>

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