如何在网站中添加音乐

浏览数：17 / 时间：2015年06月09日

发现有很多的个人博客中添加了背景音乐，以增强用户体验。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，是一个网页播放器。调用代码：

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();