首页 > 网站 > WEB开发 > 正文

如何在网站中添加音乐

2024-04-27 14:17:55
字体:
来源:转载
供稿:网友

如何在网站中添加音乐

来源: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,可以设置的皮肤有:redtczMusic.skin=”red”;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表