搜索
查看: 1919|回复: 0

[原创] 如何在Discuz中使用HTML5音乐播放器

[复制链接]
  • TA的每日心情
    慵懒
    2017-10-13 23:57
  • 签到天数: 170 天

    [LV.7]常住居民III

    0

    贡献

    17

    积分

    36

    帖子

    管理员

    笨蛋索尼子

    Rank: 20Rank: 20Rank: 20Rank: 20

    主题
    24
    经验
    11238
    银币
    505
    注册时间
    2016-9-25
    发表于 2016-10-9 02:53:40 | 显示全部楼层 |阅读模式
    虚拟主机教程
    面板: 通用/无限制
    网页程序: Discuz! X以上
    操作系统: 通用/无限制
    Web服务器: 通用/无限制
    程序语言: 通用/无限制
    数据库: 通用/无限制
    加密系统: 通用/无限制
    Discuz自带了flash的mp3播放器,但是现在手机普遍都已经不支持flash了,Chrome等浏览器也逐步缩减对flash的支持,是时候开始用html5的播放器了w


    HTML5里面新增了<audio>标签,这个标签将允许浏览器使用自带的音频播放器来播放指定音频。基本使用方法看起来会是这样的:

    1. <audio controls>
    2.         <source src="some.mp3" type="audio/mpeg">
    3. </audio>


    这个代码会让浏览器显示一个可以播放some.mp3的音频播放器。不同浏览器会支持不同的音频格式,例如Chrome和FireFox(火狐)支持mp3, wav, 及 ogg。
    IE8或者更旧的IE是不支持audio标签的。所以我们可以在audio里面写一个告示,提醒用户他们使用的浏览器无法支持这个标签。

    1. <audio controls>
    2.         <source src="some.mp3" type="audio/mpeg">
    3.         您当前使用的浏览器无法支持HTML5音频播放器功能,请升级您的浏览器。
    4. </audio>


    不过等等。。这不是html吗?和discuz有什么关系。。
    嗯,所以接下来我们就需要到后台,创建自定义discuz代码了。

    进入后台->界面->编辑器设置->Discuz!代码,然后新增一个代码。
    001.png
    在添加那里可以填写你希望使用的discuz代码。例如如果希望用户输入 [mp3][/mp3] 就能使用html音频播放器的话,那么就先写mp3然后添加。


    这次我用mp3作为演示。创建以后点击「详情」会看到这样一个界面
    002.png
    在替换内容中,将下面这个代码复制粘贴进去,等一下会稍微解释一下用处是什么的。
    1. <audio controls>
    2.         <source src="{1}" type="audio/mpeg">
    3.         您当前使用的浏览器无法支持HTML5音频播放器功能,请升级您的浏览器。
    4. </audio>


    这个html代码看起来和刚才的基本一样,除了src参数换成了{1}。这个就允许用户在使用[mp3]音频地址[/mp3]来定义播放器所播放的内容了。

    界面下面剩下的内容都为解释这个discuz代码的使用方法之类的,按照需要填写就好了。如果不希望所有用户都可以使用这个功能的话,通过界面最下面的「允许使用此代码的用户组」选择就好了。(按着ctrl可以进行多选)

    提交以后,记得勾选启用,要不然代码不会被解析的0x0
    003.png

    到这里,配置就基本上完成了。如果希望这个功能可以显示在编辑器里,并和插入图片之类的一样,使用提示框输入地址的话,那么需要给这个代码添加一个图标,然后选择「显示」就好了。(实际上没图标也可以,只是在编辑器里会显示一个图烂了的按钮而已了。。)



    但是到目前为止,附件里的「添加附件媒体播放代码」还是继续使用自带播放器的。所以在用户发帖时,需要让他们使用添加附件地址:
    004.png
    然后再将这个地址放到[mp3][/mp3]两个标签之间了。


    于是,帖子里现在就会使用html5的音频播放器了~



    参考

    本帖被以下淘专辑推荐:

    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|猫云社区 浙公网安备 33011802001168号

    GMT+8, 2018-10-17 21:26 , Processed in 0.077389 second(s), 13 queries , Xcache On.

    Powered by Discuz! X3

    © 2014-2016 MyDzHost | © 2001-2013 Template Design S!|Discuz! X3 © 2001-2013 Comsenz Inc

    快速回复 返回顶部 返回列表