如何在网站中添加音乐

来源:http://www.ido321.com/1042.html

发现有很多的个人博客中添加了背景音乐,以增强用户体验。LZ搜集到了两种在网站中添加音乐的方式。

一、豆瓣的FM

        这个非常简单,一段代码就可以实现。

<p>
    <iframe name="iframe_canvas"
            src="http://douban.fm/partner/baidu/doubanradio"
          height="200" width="500" frameborder="0" scrolling="no">
    </iframe>
</p>

效果:

简单实用,并且能在本地体验,相当不错。但是外观差了一点,需要额外的css控制。

二、Web版的Javascript插件

       有一个ajaxsns的Web API,是一个网页播放器。调用代码:

<script type="text/javascript" src="http://api.ajaxsns.com/music/tczPlayerApp.js"></script> <script type="text/javascript">

tczMusic.skin="red";         tczMusic.post=["left","top"];         tczMusic.posx=120;         tczMusic.posy=120;         tczMusic.show(); </script>

效果:http://testmusic.sinaapp.com/

比较迷你,可以通过代码自行控制,包括位置、歌曲曲目等。也可以只调用一句:tczMusic.show(),则一切是默认设置。但不可以在本地测试。相关参数如下:

//设置皮肤,默认为 red,可以设置的皮肤有:red
tczMusic.skin=”red”;

//位置:以下为默认设置,表示距右边20px,距底部20px的位置,post第1参数可以是 left、right,第2参数可以是 top、bottom
tczMusic.post=["right","bottom"];
tczMusic.posx=20;
tczMusic.posy=20;

//是否自适应屏幕及随滚动条改变位置,默认为true 可设置:true、false
tczMusic.roll=true;

//歌曲列表高度,默认为240,可设置范围:50-500
tczMusic.listht=300;

//是否默认打开歌曲列表,默认为 false (关闭) 可设置:true、false
tczMusic.listview=false;

//打开时播放第几首歌曲,默认为1
tczMusic.song=1;

//是否随机播放,默认为 true (随机播放),可设置:true、false
tczMusic.random=true;

//是否循环播放,默认为 true (循环播放),可设置:true、false
tczMusic.loop=true;

//是否自动播放歌曲,默认为 true (自动播放),可设置:true、false
tczMusic.autoplay=true;

//是否开启记忆播放功能,默认为 false (关闭),可设置:true、false
//如开启记忆播放功能,则刷新页面或下次打开播放器时会继续上一次的播放进度及播放/暂停的状态。
tczMusic.saveplay=false;

//两首歌曲相隔时间设置,默认为 3000 (单位:毫秒 1000毫秒=1秒),建议设置范围:1000-5000
tczMusic.spacetime=3000;

//设置歌曲列表,数组格式(最后一首歌后面不需要逗号),不设置则启用默认列表,可设置为空:tczMusic.list=[];
tczMusic.list=[
["歌曲名","歌手名","歌曲地址"],
["歌曲名","歌手名","歌曲地址"]
];

//显示播放器(基本参数,必须设置或执行此参数才会启用播放器)
tczMusic.show();

快去体验一下吧,如果你有更好的,欢迎推荐。(*^◎^*)

下一篇:SQL的几种连接:内连接、左联接、右连接、全连接、交叉连接

-------------------------------------------------------------------------------------------------------------------------------------

这里涵盖了Web开发,移动开发,Java等编程语言、综合资讯、SEO等名博,那博客收录集地址:http://www.ido321.com/daohang/daohang.php

时间: 2024-12-11 17:55:40

如何在网站中添加音乐的相关文章

创建Windows Azure网站,使用FTP客户端在网站中添加页面

创建Windows Azure网站 创建web site非常简单,直接上图 FTP的用户名,千万不要搞错了是网站名称\用户名,这样的格式 你可以从截图中看到我添加test.asp作为新的默认页面. azure网站支持php5.3/5.4/5.5, 也支持java 创建Windows Azure网站,使用FTP客户端在网站中添加页面,布布扣,bubuko.com

bootstrap设计网站中添加代码高亮插件

这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/google-code-prettify/prettify.css http://codecloud.sinaapp.com/google-code-prettify/prettify.js (2)在head中引入这两个文件 <link href="google-code-prettify/p

【前端】向blog或网站中添加语法高亮显示代码方法总结

向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在IDE或专业编译器一样能够高亮显示在网页或博客中(如下图显示),上网查了很多资料,下面是我对学习到的方法的归纳总结. 下面的方法基本上都是利用第三方javascript插件实现的,因此不必担心方法有多难,只要拿过来使用就可以了.在讲述方法之前先介绍一下与之条件: 预备知识 HTML和CSS的基本知识 目

在网页中添加音乐

最近在折腾一个网页,对于一个有强迫症的人来说,就想在网页中插入音乐,(当做背景音乐),然后自己百度了好多资料:就在这里总结一下: 第一步: 我们需要在网页添加一些代码:我也不喜欢那种代码太长的:自己就整理了一下:这里我添加的都是单曲,(单曲循环的那种),添加多个背景音乐,代码比较长,我就没去折腾,(其实是折腾了一种方法,没搞出来,就放弃了): 第一种代码: <EMBED src="http://img.xiaonei.com/photos/20060603/1510/orig51097.w

电商网站中添加商品到购物车功能模块2017.12.8

前言: 电商网站中添加商品到购物车功能模块实现: 根据前一篇博客的介绍,我们看到淘宝网站为了保证购物车数据的同步,直接是强制用户必须登录才可以将商品加入购物车.而京东网站是用户在未登录的状态下也可以将商品加入到购物车,此时这个是保存在了cookie中,然后用户登录后,根据商品的id判断商品是否存在,将两个购物车的商品合并,形成最终的购物车商品. 本篇文章分两个模块,分别看下这两个功能是如何实现的: 1.必须在用户登录的前提下,才可以将商品加入到购物车列表 我们今天先看下淘宝网站的状态下的添加商品

百家搜索:在网站中添加Google、百度等搜索引擎

来源:http://www.ido321.com/1143.html 看到一些网站上添加了各种搜索引擎.如Google.百度.360.有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键字,找到了小窍门,于是乎,自家弄了一个百家搜索: 效果: 演示地址戳此:http://sousuodaquan.sinaapp.com/ ps:在列表中添加了糯米汇(http://www.nuomihui.com)的站内搜索,仅用于演示,别无它用,特此声明. HTML代码: <div class=&qu

在网站中添加百度地图

怎样在网站中引用百度地图? 1.在html中添加一个div,添加一些样式. <div id="divMap" style="width:50%;height:300px;border:1px solid gray;"></div> 2.在head中添加对百度地图的引用. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.

如何在asp网站中添加下载功能

%E6%88%91%E7%9A%84%E7%A8%8B%E5%BA%8F%E5%86%99%E5%88%B0%E4%BA%86%E5%85%B3%E9%94%AE%E6%AD%A5%E9%AA%A4%E4%BA%86%E5%A4%A7%E7%A5%9E%E8%AF%B7%E8%BF%9B http://f.703804.com/item-554539.html http://f.703804.com/item-554540.html http://f.703804.com/item-554542

通过js实现在页面中添加音乐

代码如下!兼容IE // JavaScript Document function autoPlay(){//自动播放 var myAuto = document.getElementById('myaudio'); myAuto.src = '/media/v2/sss.mp3';//MP3路径 myAuto.play(); } function pausePlay(){//暂停播放 var myAuto = document.getElementById('myaudio'); myAuto