Discuz论坛web网页mp3音频播放器源码下载

最近在做一个DZ论坛的搭建，在前几天的时候遇到Flash+Js的幻灯片的问题，特写了一篇《JS+Flash焦点图轮播源代码（2屏，3屏，多屏）》来记录论坛搭建过程遇到的一些技术性问题，以便自己在以后遇到相同问题的时候可以在第一时间就能找到答案，同时也希望能够通过这样的一些实操型的文章来为遇到相同问题的同行们提供便利。这不，今天又遇到了一个问题。
H5网页播放器源码下载
今天主要记录和分享的是关于在DZ论坛中使用音频播放器的解决方案。
一、DZ论坛帖子中插入音频的问题来源
我的论坛使用的是Discuz 3.2 的UTF版本，需要在帖子中插入音频并且可以自动播放。虽然DZ论坛自带了一些多媒体标签，如：audio、media、flash 等短标签，通过这些标签可以在帖子中分别插入音频、视频和Flash动画。但是通过自己的实际操作和在网上一些网友反应，DZ3.2的这些标签基本上都不太好用，甚至不能正常使用。
我遇到的情况是：通过audio标签插入音频后无法播放，在音频播放器的位置单击右键显示的是“没有加载影片…”
二、DZ论坛帖子中插入音频的解决过程
1、百度搜索这种情况的解决方式，普遍认为是DZ3.2的播放器存在问题，下载DZ2.5源码然后用其中的播放器替换3.2的文件。
/static/image/common/player.swf mp3player.swf
把这几个文件用3.0或2.5版本的DZX源程序中的来替换
出现此种问题的小伙伴可以试一下这种方法，但是我尝试后还是没有解决我的问题。
2、下载mp3播放器插件
我在网上找到了一个网页播放器，按照教程添加后可以正常播放，效果如下图：
H5网页播放器效果
听到网页中播放出了mp3声音，不禁一阵欣喜。但是，很快就发现的问题：这个播放器在手机端无法显示，不能播放。
3、直接插入H5标签。
经过以上的测试都不能完美的解决问题，最后将思维转换到源代码上。经过测试，这种方法是可行的，可以兼容PC端和手机端，下面是具体的实施方法。
需要用到的源码：

   <div style="width:300px; height:100px; margin:10px auto">
        <audio controls=true autoplay=true>
           <source src="{1}" />
           你的浏览器不支持此标签。
        </audio>
   </div>

实施过程：

a.把下面的这个小图标下载后命名为“bb_music.gif"并上传到DZ论坛的“static\image\common”目录下；
bb_music
b.按照下图中的步骤添加一个mp3标签，并提交。
c.点mp3标签的详情，并填写相应的内容。
标签：mp3
替换内容：复制上面的源代码
例子：[mp3]http://www.feiyuseo.com/static/mp3/201611281531.mp3[/mp3]
解释：请输入音乐网址，如 http://www.feiyuseo.com/static/mp3/201611281531.mp3
参考提示语：请输入音乐网址，如 http://www.feiyuseo.com/static/mp3/201611281531.mp3
嵌套次数：1

按照上面的内容添加并提交后就可以实现web网页mp3音频播放器了。
三、总结
通过这次测试虽然完美解决了在web网页内插入音频播放器的问题，但是我们也应该认识到，有的时候最简单的就是最好的，与大家共勉。