clover

转角遇见四叶草

clover.work

怎样免插件在WordPress中插入音乐播放器

HTML5标签实现

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

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

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

 

七牛文件管理
 

 

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

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

只需复制上面的内容即可

 

autoplay=”autoplay”   代表的是自动播放属性

controls="controls" 代表的是插件的控制面板(播放按钮)

更多标签属性可查看文章底部

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

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

 

<audio> 标签的属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
src url 要播放的音频的 URL。

相关页面

参考手册:HTML 5 <audio> 标签

2015-07-06 2 / /
标签:  暂无标签

评论回复

  1. 回复 Alston

    请问一下:你使用MJ的主题有没有尝试过:发布音频、视频类型的日志,页面底部的评论变了形,有些地方不对

3 + 4 =

回到顶部