如何在网页中插入自动播放的音乐?使用于任何网页

网站功能不用太多,自己需要的就好了,自己的博客慢慢的完善,一个一个功能的增加,都是自己需要而且实用的,自己动手才会珍惜!

这音乐的功能很简单,一段代码而已:

<audio controls autoplay="autoplay" loop="loop">
<source src="http://lykezhan.com/test.mp3" type="audio/mpeg" />
  如果不播放,说明你的浏览器不支持!
</audio>

加上去之后会有这么一个播放器显示

相信谁都能理解,但是几点注意,我后面为什么还要多加一个“loop”?这不是和“autoplay”重复了么?

是的,重复,但是不矛盾,我自己的网站如果不加“loop”,是不会自动播放的。

为了美观我还会加上hidden,隐藏播放器,达到点进去网页就播放

只有很少数而特殊的网页我才会用上音乐!

接下来就把代码写到模板页面,然后后台编辑文章页面添加一个文本框,进行方便输入音乐地址。

这样就很方便的在添加文章的时候随意了,当然要在特殊的模板中,不然的话,每一个页面都要加载一个播放器,不是让网站变的很臃肿么?所以复制新建一个模板页面,在需要添加音乐的时候就选择那个模板页面就好了!

改版完成,我只在“生活日记”栏目添加了音乐功能,模版的代码改成:

<audio controls autoplay="autoplay" loop="loop" style="display:none;">
<source src="{dede:field.shorttitle/}" type="audio/mpeg" />
  如果不播放,说明你的浏览器不支持!
</audio>

需要注意的是要在栏目哪里修改文章内容模板!

原文地址:https://www.cnblogs.com/lykezhan/p/9426885.html

时间: 2024-10-13 01:43:27

如何在网页中插入自动播放的音乐?使用于任何网页的相关文章

网页中插入VLC播放器播放rtsp视频流步骤

1.      仿照http://download.csdn.net/detail/haowenxin123456789/8044245 中步骤: 2.      从http://www.videolan.org/vlc/index.html  中下载 vlc-2.2.1-win32.exe 并安装到D:\\ProgramFiles文件夹下: 3.  运行:vegsvr32  D:\\ProgramFiles\\VideoLAN\\VLC\\axvlc.dll : 4.  test.html 文

如何在网页中插入音频,视频(复制粘贴借鉴的)

三种 分别用<bgsound />.<embed>和<video>标签,当用<embed><video>插入背景音乐时可以设置宽度和高度为0,隐藏播放器,在这里重点说前两者. ■ <bgsound>:<bgsound> 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下<bgsound src="your.mid" autostart=true loop=infinite>src=&

在网页中插入背景音乐代码(html)hK3V

有两种分别用和标签当用插入背景音乐时可以设置宽度和高度为,隐藏播放器.二者的参数如下:■: 是用来插入背景音乐,但只适用于,其参数设定不多.如下 设定档案及路径,可以是相对或绝对.是否在音乐档下载完之后就自动播放.是,否内定.是否自动反复播放.表示重复两次,表示重复多次.■: 是用来插入各种多媒体,式可以是...等等,及新版的都支持.其参数设定较多.如下下 设定档案及路径,可以是相对或绝对.是否在音乐档下载完之后就自动播放.是,否内定.是否自动反复播放.表示重复两次,是,否.是否完全隐藏控制画面

网页中插入Flash动画(.swf)代码和常用参数设置

我们现在大部分人做网页,都是直接用DW插入flash,而且DW也是所见即所得,直接生成了相应的flash显示代码.可是我们又有多少人了解这些直接由DW生成的代码呢?其实我接触flash player标签,是在刚学习html的时候,那时书中插入flash只有最简单的<embed src="" width="" height=""></embed>一句,而且在很长一段时间里,只要网页中插入flash我也都是这样写的,当时认为,

在网页中插入背景音乐代码(html)

有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如下: ■ <bgsound>: <bgsound> 是用来插入背景音乐,但只适用于 IE,其参数设定不多.如下 <bgsound src="your.mid"autostart=true loop=infinite> src="your.mid

网页中插入swf动画(embed)

网页中插入swf动画(embed) 例题: 1 <embed src="swf.sef" width="200" height="200" align="LEFT" type="application/x-shockware-flash" pluginspage="http://www.mcromedia.com/qo/gerflashplayer"> 注释: 1.type:

在网页中插入百度地图(实例)

步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用) 切换城市,搜索需标注位置.(如下图:) 设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动. 添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息.(如下图

网页制作时,如何在网页中插入表格?

在Dreamweaver中,表格可以用于制作简单的图表,还可以用于安排网页文档的整体布局,起着非常重要的使用.在网页中插入表格的方法非常简单,具体操作步骤如下: 1.打开网页文档,执行"插入""表格"命令 2.弹出"表格"对话框,在对话框中将"行数"设置为3,"列"设置为2,"表格宽度"设置为60% 3.单击"确定"按钮,插入表格 在"表格"对话框

网页中插入QQ在线功能

网页中插入QQ在线功能 本随笔记录的是网页中如何插入qq在线聊天,这里讲解的是 普通QQ在线聊天操作. 例:第一种方式  使用 tencent://message/?uin=QQ号码&Site=blog.sina.com.cn&Menu=yes 链接来操作 这里注意 img标签,这里例出三种样式的img,区别仅仅在于QQ号码后面的端口号之间 <h2>第一种链接方式</h2> <A target="_blank" href="ten