zoukankan      html  css  js  c++  java
  • 在h5页面上添加音乐播放

    接到需求说要做一个h5轮播图,同时配上背景音乐。

    Html部分:

    <!--音乐开始-->

    <div id="music">

    <div id="audio-btn" class="on" onclick="music.changeClass(this,'media')">

    <audio loop="loop" src="images/SeeYouAgain.mp3" id="media" preload="preload"></audio>

    </div>

    </div>

    <!--音乐结束-->

     

    Css部分:

    #music #audio-btn {

    width: 44px;

    height: 44px;

    position: fixed;

    z-index: 1000;

    top: 30px;

    left: 30px;

    }

    #music .on { 

    background: url('../images/music_on.png') no-repeat 0 0; 

    -webkit-animation: rotating 1.2s linear infinite; 

    animation: rotating 1.2s linear infinite;

    }

     

    #music .off {

    background: url('../images/music_off.png') no-repeat 0 0;

    }

      

    @-webkit-keyframes rotating { 

    from { 

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    }

    to {

    -webkit-transform: rotate(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    transform: rotate(360deg);

    }

    }

    @keyframes rotating { 

    from { 

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    }

     

    to {

    -webkit-transform: rotate(360deg); 

    -moz-transform: rotate(360deg); 

    -ms-transform: rotate(360deg); 

    -o-transform: rotate(360deg); 

    transform: rotate(360deg); 

    }

    }

     

    JS 部分:

     

    var music = {

    changeClass: function(target, id) {

    var className = $(target).attr('class');

    var ids = document.getElementById(id);

    (className == 'on') ?

    $(target).removeClass('on').addClass('off'): $(target).removeClass('off').addClass('on');

    (className == 'on') ?

    ids.pause(): ids.play();

    },

    play: function() {

    var media = document.getElementById('media');

    media.src = "images/SeeYouAgain.mp3";

    media.play();

    //document.getElementById("audio-btn").click(changeClass(this,'media'));

    document.addEventListener("WeixinJSBridgeReady", function() {

    var audioPlayer = document.querySelector('audio#media');

    if(audioPlayer.paused) {

    music.changeClass($(".off"), 'media')

    }

    media.play();

    }, false);

    }

    }

    music.play();

     

    var audioPlayer = document.querySelector('audio#media');

    if(audioPlayer.paused) {

    music.changeClass($(".on"), 'media')

    }

     

     

    遇到的问题:

    (1)安卓手机正常,苹果手机微信不能播放:

    添加微信监听事件:

    document.addEventListener("WeixinJSBridgeReady", function() {

    media.play();

    )}

     

    (2)微信正常,苹果ipad上的qq不能播放

    这个在各种百度后发现,还是不能播放,所以我们对播放器进行判断,更换停播样式:

     

    var audioPlayer document.querySelector('audio#media');

    if(audioPlayer.paused) {

    music.changeClass($(".on"), 'media')

    }

     

    (3)qq好了,微信出现样式是停播,但是实际在播放,所以把判断也要赋值到,监听后的方法中。

     

    ok 各种正常,写个博客压压惊。

     

  • 相关阅读:
    微信坚硬的后脚跟
    [项目整理]Win32,MFC的可执行文件只能运行一次
    美司法部索要维基解密志愿者谷歌账户内容
    QML性能
    OSGi 的核心配置、动态化及问题
    OSGi 的由来和本质特性
    机器视觉与计算机视觉
    人工智能与深度学习
    活着就能改变世界
    选择与执行
  • 原文地址:https://www.cnblogs.com/chengmingxiaowu/p/7698866.html
Copyright © 2011-2022 走看看