手机微信音乐播放器/手机mp3网页播放器/微信mp3播放器 [TOC] ## 插件介绍 这是一款支持手机微信使用简洁的mp3音乐播放器。 1. 支持在微信中播放； 2. 支持在ios,安卓中播放器mp3； 3. 也支持在pc中播放。 4. 代码简洁，功能实用，很方便的音乐播放器，希望你会喜欢。 特别提示：音乐格式仅限于mp3，不支持wma之类的格式。  ## 参考网址： http://www.52player.cn/MusicPlayer/2016/070174.html H5分享页面背景音乐及播放视频 https://blog.csdn.net/weixin_42423019/article/details/80733601 **我爱播放器（OKOK）** http://www.52player.cn/index.html ## HTML前端 ~~~ <div class="mymusic"> <div class="play-box"> <audio id="main_audio" autoplay="autoplay" preload="auto" loop> <source src="http://mp3.9ku.com/mp3/646/645517.mp3" type="audio/mpeg" /> <embed id="main_audio_ie8" hidden="true" autostart="true" height="0" width=0 loop="true" src="http://mp3.9ku.com/mp3/646/645517.mp3" autoplay="autoplay"/> </audio> <a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);">&nbsp;</a> </div> <div class="text"></div> </div> ~~~ ## 文件引入 ~~~ <link rel="stylesheet" type="text/css" href="__INDEX__/default/css/cuplayer.css" /> <script type='text/javascript' src='__INDEX__/default/js/jquery.min.js'></script> ~~~ ## 事件实现 ~~~ //获取picid函数 $(function(){ $("area").click(function(){ var picId=$(this).attr("data-id"); var picSrc="images/img_big/"+picId+".jpg" $(".modal-content>.pic-box>img").attr("src",picSrc); }) var isPlaying = function(audio) {return !audio.paused;} var a = document.getElementById('main_audio'); if(!(a.play instanceof Function)){ a = document.getElementById('main_audio_ie8'); isPlaying = function(audio) {return audio.playState==2;} } $('#btn-play').on('click', function() { if($(this).hasClass('rotate')) { a.pause(); $(this).removeClass('rotate'); } else { a.play(); $(this).addClass('rotate'); } }); }) ~~~ ## CSS ~~~ div.mymusic { position: absolute;right: 10px;top: 30px; padding:10px; height:32px; } ~~~