手機微信音樂播放器/手機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; } ~~~