有网友@she在留言中询问本站音乐播放器如何实现，博客也好久没更新了，趁着清明放假有点时间，分享一下实现过程。这是一个很简单的播放器效果，界面主要利用CSS3的一些属性，如animation、translate、transform等，效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能，如需实现诸如酷狗音乐的播放器效果，请深入研究Audio。个人认为，该播放器足以满足博客等非音乐网站的需求。当然，诸如以往，以上包括这句都是废话：）

关于audio

audio标签定义声音，比如音乐或其他音频流。支持HTML5中的全局属性和事件属性。

可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。如：

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

audio属性列表

以上内容，你都可以在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();
}

demo

[codepen:author:smohan,id:brqGxB]

-- EOF --

本文标题：为你的博客添加简单的CSS3音乐播放器

本文链接：https://smohan.net/blog/tfw78q

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。 相关说明 »