如何在网站中添加音乐

矫情吗；* 2022-08-13 11:41 200阅读 0赞

来源：[http://www.ido321.com/1042.html][http_www.ido321.com_1042.html]

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

**一、豆瓣的FM**

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

效果：

![SouthEast][]

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

**二、Web版的Javascript插件**

**      ** 有一个ajaxsns的Web API，是一个网页播放器。调用代码：

效果：[http://testmusic.sinaapp.com/][http_testmusic.sinaapp.com]

![SouthEast 1][]

比较迷你，可以通过代码自行控制，包括位置、歌曲曲目等。也可以只调用一句：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的几种连接：内连接、左联接、右连接、全连接、交叉连接 ][SQL_]

\-------------------------------------------------------------------------------------------------------------------------------------

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

[  
][http_www.ido321.com_1042.html]

[http_www.ido321.com_1042.html]: http://www.ido321.com/1042.html
[SouthEast]: /images/20220810/bf322edfddf04d6eb3774e8e9c2079d9.png
[http_testmusic.sinaapp.com]: http://testmusic.sinaapp.com/
[SouthEast 1]: /images/20220810/5d25eb9c76204c65b059ad613470a529.png
[SQL_]: http://www.ido321.com/1061.html
[http_www.ido321.com_daohang_daohang.php]: http://www.ido321.com/daohang/daohang.php