JAVA高级面试进阶训练营视频教程

admin

html代码如下，ios的audio标签好像不支持ogg文件播放，在微信端放了ogg音频文件，都无法播放，因此改用MP3文件。

<!-- 音频 -->
<audio controls="controls" autoplay="autoplay" id="mp3Btn" style="display: none;">
  <source src="resource/mp3.mp3" type="audio/mp3" />
</audio>
<!-- 音频 end-->

设置为display:none，隐藏掉音频组件，增加额外组件样式，用于控制音频的播放。

<div style="width: 50px;height: 50px; position: absolute; top: 20px;right: 10px;" class="btn-audio rotateClass">
<img src="image/audio.png" style="    width: 50px;">
</div>

引入了一张音符图片，增加css3样式，使图片旋转起来，增加动态效果，其中rotateclass主要控制图片的旋转。代码如下

.rotateClass{

 -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    /* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
    -webkit-animation:play 3s linear infinite;
    -moz-animation:play 3s linear infinite;
    animation:play 3s linear infinite;
}
@-webkit-keyframes play{
    0%  {
        /*
        水平翻转
        */
        /*-webkit-transform:rotateY(0deg);*/
        /*
        垂直翻转
        -webkit-transform:rotateX(0deg);
        顺时针旋转
        -webkit-transform:rotate(0deg);
        逆时针旋转
        -webkit-transform:rotate(0deg);
        */
        -webkit-transform:rotateX(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
        /* 水平翻转 */
        /*-webkit-transform:rotateY(360deg);*/
        /* 垂直翻转
        -webkit-transform:rotateX(360deg);
        顺时针旋转
        -webkit-transform:rotate(360deg);
        逆时针旋转
        -webkit-transform:rotate(-360deg);
        */
    }
}
@-moz-keyframes play{
    0%  {
        -moz-transform:rotate(0deg);
        /*-moz-transform:rotateY(0deg);*/
        /*
        -moz-transform:rotateX(0deg);
        -moz-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        */
    }
    100% {
        -moz-transform:rotate(360deg);
        /*-moz-transform:rotateY(360deg);*/
        /*
        -moz-transform:rotateX(360deg);
        -moz-transform:rotate(360deg);
        -moz-transform:rotate(-360deg);
        */
    }
}
@keyframes play{
    0%  {
         transform:rotate(0deg);
       /* transform:rotateY(0deg);*/
        /*
        transform:rotateX(0deg);
        transform:rotate(0deg);
        transform:rotate(0deg);
        */
    }
    100% {
         transform:rotate(360deg);
       /* transform:rotateY(360deg);*/
        /*
        transform:rotateX(360deg);
        transform:rotate(360deg);
        transform:rotate(-360deg);
        */
    }

用JS控制，当歌曲播放时，图片自动旋转，歌曲停止后，图片旋转停止。JS代码如下：

<script type="text/javascript">
    $(document).ready(function(){ 
        //播放完毕
        $('#mp3Btn').on('ended', function() {
            console.log("音频已播放完成");
            $('.btn-audio').removeClass('rotateClass');
        });
        //播放器控制
        var audio = document.getElementById('mp3Btn');
        audio.volume = .3;
        $('.btn-audio').click(function() {

            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果当前是暂停状态
                $('.btn-audio').addClass('rotateClass');
                audio.play(); //播放
                return;
            }else{//当前是播放状态
                $('.btn-audio').removeClass('rotateClass');
                audio.pause(); //暂停''
            }
        });
    });
</script>

至此，代码在安卓机和PC端上运行正常，但在IOS系统上会出现无法播放的情况。查阅了相关资料，需引入微信API接口，用JS控制代码如下：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script type="text/javascript">
    document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('mp3Btn').play(); 
        // document.getElementById('video').play(); 
    }, false);
</script>

至此阶段，经测试，代码运行正常。