您的位置：首页 > 编程技术 > html  >  怎么在网页中添加背景音乐 网页中添加音乐

怎么在网页中添加背景音乐 网页中添加音乐

 更新时间：2016年9月20日 18:58  点击：2142
本文章来给各位同学介绍怎么在页面中添加背景音乐代码，各位朋友可进入参考。

方法一


插入代码

代码如下：

 代码如下 复制代码

<embed autostart="true" hidden="true" loop="true" src="/hao1.mp3"></embed>

粉红色部分 就是把你刚获取的 音频文件的链接替换掉（需要注意的是，有些链接的结尾不是.mp3或者.wma类的，这类的链接别要哦，放不出来的。）

支持的音乐格式： wma、mp3、rm、ra、ram、asf，尽量选用可连接性高的音乐链接，保证音乐可以顺利播放；
width和height表示播放器宽度和高度，可以灵活设置；
autostart="true"表示自动播放，autostart="false"表示不自动播放； loop="true"表示连续循环播放，loop="false"表示不循环播放； loop也可
以设为一个整数，比如loop="3"，表示音乐循环播放3次


方法二

Firefox浏览器和Chrome没问题，不过好像要装插件

 代码如下 复制代码
<object data="qingchundeyanse.mp3" type="application/x-mplayer2" width="0" height="0">
  <param name="src" value="qingchundeyanse.mp3">
  </param><param name="autostart" value="1">
  </param><param name="playcount" value="infinite">
  </param></object>

这种代码是IE内核的浏览器没问题

 

 代码如下 复制代码
<bgsound src='/qingchundeyanse.mp3' loop="-1">
</bgsound>

例

下面是在网页中加入背景音乐的代码。但是音乐的格式我用的是mid.音乐文件放在与网页文件同目录的文件夹下。
<html>

 代码如下 复制代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<bgsound src="huahaoyueyuan.mid" loop="-1">
</head>

<body>

</body>

</html>
本文章来给大家介绍给Ckeditor添加一个插入code标签的按钮实例，转截的大家可参考参考。

Ckeditor是一个非常受欢迎的JavaScript编辑器，问世至今走了十年，依然还是市场老大，经得起时间考验就是好程序。

因为经常写一些技术博文，可能有些地方需要插入code标签，而默认Ckeditor不具备插入code标签功能，但它提供的拓展灵活程度让我感觉这就是那么容易。

一、下载程序，解压

下载地址：http://ckeditor.com/

如果你没有下载错的话，解压后的目录应该跟截图一致。

二、创建插件目录

截图画红线的目录plugins就是ckeditor插件目录，所有的插件都集合在里边，在里边创建一个code目录，作为插入code标签功能的插件目录。

三、编写插件程序

ckditor插件的规则是在插件目录下创建一个plugin.js文件作为插件主程序处理文件，如果是复杂的插件可能会有N个js文件。

因为插入code标签这个功能非常简单，所以一个plugin.js就能搞定。

代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 添加一个插件
CKEDITOR.plugins.add('code', {
  
// 插件初始化
init: function (editor) {
  
    // 添加code按钮
    editor.ui.addButton('code', {
  
        // 鼠标移到按钮提示文字
        label: 'code',
  
        // 命令
        command: 'code',
  
        // 图标（相对于插件本身目录下）
        icon: this.path + 'images/code.gif'
  
    });
}
  
  
});

四、制作按钮图标

额~~~，这个不在本文讨论范围之内，可以使用一些简单的作图工具制作就好。

我作图也不行，随便使用Fireworks做了一个

看起来很呆。。。。将就用吧！

图标文件名与路径要对应你在plugin.js中设置好的，因为我在plugin.js中定义的图标位置是在images目录下的code.gif图标，So 把code.gif图片放到插件目录的images目录下

五、修改config.js配置文件

打开config.js，添加一句

 代码如下 复制代码

config.extraPlugins += (config.extraPlugins ? ',code' : 'code');

最终config.js代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */
  
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
      
    // 这句代码是添加的
    config.extraPlugins += (config.extraPlugins ? ',code' : 'code');
};

六、测试，看欧了不

新建一个HTML页面

?
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
        <script src="ckeditor/ckeditor.js"></script>
    </body>
</html>

使用浏览器打开创建的HTML页面

欧拉，按钮出来了。

七、添加点击事件

可系~~~现在能用了吗？点，我点，我使劲点。。咋没有反应呢！

亲，别急，你还没有添加点击事件呢！

打开之前创建plugin.js文件，添加click事件，最终代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 添加一个插件
CKEDITOR.plugins.add('code', {
  
// 插件初始化
init: function (editor) {
  
    // 添加code按钮
    editor.ui.addButton('code', {
  
        // 鼠标移到按钮提示文字
        label: 'code',
  
        // 命令
        command: 'code',
  
        // 图标（相对于插件本身目录下）
        icon: this.path + 'images/code.gif',
  
        // 添加点击事件   
        click:function(){
              
            // 获取选取的文本
            var selectText = editor.getSelection().getSelectedText();
  
            // 判断选取的文本是否为空
            // 如果为空就啥都不干
            if( selectText !== ""  ){
  
                // 判断你是要干嘛？
                // 你是要添加code标签呢？
                // 还是你要取消code标签？
                if( editor.getSelection().getStartElement().getName() !== "code" ){
                      
                    // 添加code标签
                    var insertHtml = "<code>" + selectText + "</code>";
                    editor.insertHtml(insertHtml);
                }else{
                    // 取消code标签
                    editor.insertText(selectText);      
                }
            }
  
        }
  
    });
}
  
  
});

重新运行浏览器，随便输入一行字，选中几个，点击code按钮，亲，这下可以了吧！

八、code标签样式

虽然，按钮功能可以用了，但还有点郁闷，就是code标签的文本跟其它标签的文本看起来没差别，看不出来哪些已经添加code标签

我们给code标签添加几个样式，让它与众不同。打开ckeditor目录下的contents.css

在结尾处添加code样式

?
1
2
3
4
5
6
7
code {
    border:1px solid #ffe4c4;
    color:#ff7f50;
    border-radius:2px;
    padding:0 2px;
    margin:0 2px;
}

保存，重新运行看下效果！

如果需要取消code标签的文字只需要选择已被添加code标签的文字，再点击code按钮就好！

本文章来给大家推荐两个把在线QQ聊天/QQ群代码放在网页中用户只要点击就可以实现与我们聊天或直接加QQ群了，各位朋友有需要可参考。

第一种简洁型，看一下效果吧

 

 代码如下 复制代码
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=894816041&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:894816041:52" alt="点击这里给我发消息-PHP博客" title="点击这里给我发消息-PHP博客"/>
</a>

第二种标准型，看一下效果吧

 

 代码如下 复制代码

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=894816041&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:894816041:51" alt="点击这里给我发消息-PHP博客" title="点击这里给我发消息-PHP博客"/></a>

第三种拓展型，看一下效果吧

 

 代码如下 复制代码
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=894816041&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:894816041:53" alt="点击这里给我发消息-PHP博客" title="点击这里给我发消息-PHP博客"/>
</a>

好了，把上面的代码复制到你需要的页面就可以实现QQ在线聊天功能了


最新的添加QQ群代码

以前旧版本的添加QQ群代码，已经停止使用。

 代码如下 复制代码
<a href="http://qun.qq.com/#jointhegroup/gid/126026608" target="_blank" style="color:#0196E3">
<img border="0" src="/gp.do.png" alt="点击这里加入ecshop深度交流群126026608" title="点击这里加入ecshop深度交流群126026608" width="82" height="25"/></a>

最新网页添加QQ群代码

 代码如下 复制代码

<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=78f8514b8f38c042e5fdcc270ee044e9f5cf7025ff99ece2b2e728d9934739f2">
<img border="0" src="/group.png" alt="点击这里加入ecshop深度交流群126026608" title="点击这里加入ecshop深度交流群126026608"/></a>
本文章来给各位同学介绍关于iframe框架或者网页与浏览器有间隙的处理办法,有碰到此类问题的朋友可进入参考。

 

如上图，今天处理一个iframe框架，老问题再次出现了，浏览器边缘与浏览器有很大的一个间隙！在IE6下和Chrome下都有，这是我以前遇到很多次的现象了，可是我不是更搞代码出身的，记不住。

解决办法：给网页中body加上参数leftmargin=”0″ topmargin=”0″，只是body这一部分！

如：

<body leftmargin="0" topmargin="0"> <img src="/luezhu/images/xxx" /> </body>

这样的话，浏览器与网页直接就没有间隙了，显得更加充实了！效果如：

 

注：1是无间距的效果，2是图片自带的白边！

下面再重复下我老是忘记的iframe代码：

<iframe src=”http://www.111cn.net/” frameBorder=0 scrolling=no width=”100%” height=”2930px”  style=”margin-top:0px; margin:0px; padding:0px” ></iframe>

参数：

iframe用于设置文本或图形的浮动图文框或容器。

scrolling 用法：<iframe src=”http://xxx.xx”></iframe>

功能：是否出现滚动条(“auto”为自动，“yes”为显示，“no”为不显示)

border 用法：<iframe border=”3″></iframe>

功能：设定围绕图文框的边缘宽度

frameboder 用法：<iframe frameboder=”0″></iframe>

功能：设置边框是不否为3维（0=否，1=是）

height,width 用法：<iframe height=”31″ width=”88″></iframe>

功能：设置边框的宽度和高度

scrolling 用法：<iframe scrolling=”no”></iframe>

功能：是否有滚动条（yes,no,auto)

src 用法：<iframe src=”girl.gif”></iframe>

功能：指定iframe调用的文件或图片(html,htm,gif,jpeg,jpg,png,txt,*.*)

iframe可以嵌在网页中的任意部分 ，它还可以用的属性有：name（框架的名称）、marginwidth（帧内文本的左右页边距）、marginheight（帧内文本的上下页边距）、style（内嵌文档的样式，设置iframe的样式风格）、allowtransparency（是否允许透明）

本文章来给大家介绍webeditor 编辑器上传文件d_file.myform.uploadfile为空或不是对象的解决办法

webeditor 编辑器上传文件upload.asp出现错误："d_file.myfrom.uploadfile" 为空或不是对象原因：这个主要是有些杀毒软件会把上传组建当成病毒删除掉。服务器里的杀毒软件屏蔽了上传文件的语句导致的，将杀毒软件/防火墙关闭或在其upload.asp上传相关的文件里把

 代码如下 复制代码


 S e t Ads = Server.CreateObject("Adodb.Stream")

修改为： 

S e t Ads = Server.CreateObject("Adodb." & "Stream")

就OK了。
如果有安装网站安全狗V2.4.01556 以上版本的可在主动防御---网马防护中将"开启浏览文件主动防御"前的钩去掉后保存，两份钟后再试就OK了

[!--infotagslink--]

相关文章

  • ps把文字背景变透明的操作方法

    ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08

  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20

  • C#中添加窗口的步骤详解

    下面小编就为大家带来一篇C#中添加窗口的步骤详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • ps快速抠出白色背景下的透明玻璃杯教程

    ps软件是现在很多人比较喜欢的，这次文章就给大家介绍ps软件的抠图技巧，ps快速抠出白色背景下的透明玻璃杯，一起来看看。 &#8195;&#8195;1、如果是白底抠图的话，先将...2017-07-06

  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29

  • JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法。分享给大家供大家参考，具体如下：这里演示JavaScript用按钮随意变换背景颜色，每点击一下按钮，就可以随机改变一种网页背景颜色。颜色值事先是保存在JS的数组里...2015-10-21

  • 关于python pygame游戏进行声音添加的技巧

    这篇文章主要给大家分享的是pygame游戏进行声音添加的方法，这文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！...2021-10-23

  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20

  • CSS制作的页面背景固定和滚动效果

    背景固定效果在许多的网站都能看到，今天我们一起来看一个关于CSS制作的页面背景固定和滚动效果，应用非常的好用希望对各位带来帮助。 如何创建一个不需要Javascript...2016-09-14

  • 美图秀秀怎么给照片添加电影字幕

    美图秀秀是一款不错的图片处理软件了，最近看到很多的朋友喜欢把自己的照片处理成电影字幕效果了，下面我们来看看美图秀秀怎么给照片添加电影字幕吧，希望文章对各位有帮助...2016-09-14

  • 国庆网页背景代码-首页国庆背景代码

    这款国庆背景代码是一款仿各大门户网站的，如网易，163，新浪，sina,sohu等网站的60周年国庆背景代码给各位朋友提供了哦，如果喜欢可以来看看这款为国庆而改变网页北景的代码...2016-09-20

  • JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

    这篇文章主要介绍了JQuery EasyUI datagrid 添加、修改、删除操作的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-25

  • PHP在引号前面添加反斜杠(PHP去除反斜杠)

    一般空间商提供的服务器空间默认PHP 指令 magic_quotes_gpc是on的，也就是打开的。这时候就可以用stripslashes() 函数删除自动添加的反斜杠。用法就是：比如包含字符串的变量是$str，那么就用stripslashes() 函数处理一下...2013-10-04

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下...2016-03-28

  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • 如何在.Net版本UEditor中添加一个普通按钮

    这篇文章主要介绍了如何在.Net版本UEditor中添加一个普通按钮,需要的朋友可以参考下...2021-09-22

  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05

  • 如何在 Matplotlib 中更改绘图背景的实现

    这篇文章主要介绍了如何在 Matplotlib 中更改绘图背景的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-26

  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程，抓取HTML，获取标题、描述、图片等信息，并去除HTML，希望对大家有所帮助。...2020-06-25