检测到您启用了Adblock等屏蔽广告扩展,导致正常的内容图片无法显示,为了不影响阅读体验,建议您将www.xiaoz.me加入白名单。

WordPress文章中插入音乐的两种方法

前些天有位朋友问我怎样免插件在WordPress中插入音乐播放器,方法还是蛮简单的,分享两种实现方法。一种是使用HTML5标签,另一种使用虾米音乐提供的转帖功能。

一、HTML5标签实现

直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

1.使用audio标签我们需要有课播放的URL链接,网上找的又不太靠谱,那么我们可以利用七牛云存储自己生成。没有的赶紧注册一个

2.在七牛新建一个空间(bucket),然后将本地的音乐上传到此空间,就会自动生成URL,并粘贴。如下截图:

qiniumusic

七牛文件管理

wailian

七牛云生成URL

3.我们获得音乐链接和就可以和audio标签一起使用了,在写文章的时候切换到文本模式,并粘贴如下代码即可,audio标签详细使用可查看W3C手册

1
2
<audio src="http://musicbox.qiniudn.com/2014%2F03%2Ftiangaodihou.mp3" controls="controls">
</audio>

4.这个方法生成的URL可以完全由自己决定,插入你任何想要的地方,包括QQ空间背景音乐等。而且七牛云拥有多个CDN节点,速度是完全没有问题的。不足的是新用户注册需要进行实名认证才能使用,不过也是为了防止滥用而采取的措施。

5.下面看一下我们使用audio元素的演示效果:

二、虾米转帖

1.自从虾米音乐被阿里收购后可直接使用淘宝账号登陆虾米,然后随便搜索一首你喜欢的歌曲,加入你的音乐库,点击more选项>>转帖到其它网站

xiami

虾米音乐

2.在弹出的转帖框中复制HTML代码并粘贴到WordPress文章中(文本模式编辑)

1
<embed src="http://www.xiami.com/widget/0_1772319353/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>

3.最后看一下演示效果如何:


总结:使用虾米生成的链接美观方便,不过自定义功能还不够,比如某些网站需要上传自己录制的英语口语等,所以我们可以通过七牛云存储自己生成外链,而且可以插入任何想要的网页中。

14 Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注