mp3 音乐 音频 网易云音乐

<audio preload loop id="mp3" class="bbmp3">
    <source src="//music.163.com/song/media/outer/url?id=1380902901.mp3" type="audio/mpeg">
</audio>

<button  onclick="playPause()" class="sound-icon"><img src="//cdn.myxypt.com/65595f79/24/08/464803c48b6603db7f498307ee383d89493b9798.png" alt=""></button>


<script type="text/javascript">
    var myVideo = document.getElementById("mp3");
    // 播放/暂停
    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
    $(".sound-icon").click(function(){ 
        $(".sound-icon").toggleClass("soon");
    });
</script>


<style>

/* mp3 */
.sound-icon{
    border: none;
    position: fixed;
    z-index: 999;
    width: 50px;
    height: 50px;
    right: 12px;
    background: none;
    top: 110px;
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
    animation-play-state:paused;
    outline: none;
}
.sound-icon img{
    width: 100%;
}
.soon{
    animation-play-state:running;
}
@keyframes tempKeyframesForMotion0 {
    0% {
        transform:translate(0px, 0px) rotate(0rad) rotateZ(0deg);
    }
    50% {
        transform:translate(-71px, 3px) rotate(0rad) rotateZ(0deg);
    }
    100% {
        transform:translate(0px, 0px) rotate(0rad) rotateZ(0deg);
    }
}

/*  */
@-webkit-keyframes rotating {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@-moz-keyframes rotating {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@-o-keyframes rotating {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes rotating {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}



</style>