在手机浏览器上播放音乐的代码

post by rocdk890 / 2015-6-1 10:45 Monday 其他技术

今天心血来潮想给自己的一个网页做上背景音乐,并在手机浏览器上支持播放,翻了很多地方,尝试了无数个代码,终于让我找到一个解决办法,相信对很多php程序开发会有帮助的.
代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
   </head>

  <body ontouchstart="toggleSound()">
   <audio autoplay preload="auto" controls loop  id="audio"><!--添加一个ID-->
     <source src="http://www.slogra.com/love.mp3" type="audio/mpeg" />
     您的浏览器不支持音频播放。
   </audio>
  </body>
</html>

<script>
var audio = document.getElementById('audio');
document.addEventListener('touchstart', function(){
    audio.play();
}, false);
</script>

再给大家个可以直接在qq里播放的代码,如电子请帖里的音乐代码:

<!DOCTYPE HTML>

<html>

<head>
   
    <meta charset="utf-8">
    <title>MP3测试</title>
    <style>
    .bulletin{
        position: absolute;top: 0;z-index: 10;width: 100%;
        background-color:#ffffe3;
        margin:0 auto 10px;text-align:left;
        font-size: 14px;
    }
    .bulletin p{
        padding:5px 10px;color:#595959
    }
    .bt_close_bulletin{
        position:absolute;top:5px;right:5px;
        background:0;width:20px;color:#f00;
        font-size:11px;cursor:pointer;border:0;
    }
    .a-link span{font-size:15px;}
    </style>
</head>
<body ontouchstart="">
<div class="bulletin" id="container" style="display:none;"></div>
<div class="act-wrapper">
        <button class="arrow-next varrow"></button>
        <button class="act-music" id="mbutton" onclick="audplay(this)"></button>
        <audio id="audiox" preload="preload" src="https://blog.slogra.com/love.mp3" loop></audio>
</div>
<script type="text/javascript">
window.onload = function(){
    var audio = document.getElementById("audiox");
    var mbutton = document.getElementById("mbutton");
   
    addClass(mbutton,'touchstyle-music-paly-animate');
    audio.play();
   
}

function audplay(t){
    var audio = document.getElementById("audiox");
    if(audio.paused){
        addClass(t,'touchstyle-music-paly-animate');
        audio.play();
    }else{
        removeClass(t,'touchstyle-music-paly-animate');
        audio.pause();
    }
}

function hasClass( elements,cName ){   
    return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );  
};   
function addClass( elements,cName ){   
    if( !hasClass( elements,cName ) ){   
        elements.className += " " + cName;   
    };   
};   
function removeClass( elements,cName ){   
    if( hasClass( elements,cName ) ){   
        elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " ); 
    };   
};
</script>
</body>

</html>

好了,觉得不好的话,那我就只能说自己去找.

夜空- 本站版权

1、本站所有主题由该文章作者发表，该文章作者与夜空享有文章相关版权
2、其他单位或个人使用、转载或引用本文时必须同时征得该文章作者和夜空的同意
3、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
4、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
5、原文链接：blog.slogra.com/post-596.html