来源: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

如何在网站中添加音乐相关推荐

  1. 一步一步SharePoint 2007之五:向网站中添加一个子网站

    一步一步SharePoint 2007之五:向网站中添加一个子网站 摘要 感受完看到成果的激动,感受完邻家女孩的漂亮.可爱和端庄,不要停止,来,让我们一起来动手打造心目中的完美女神吧! 本篇文章将介绍 ...

  2. 如何往 Apple Watch 中添加音乐

    如何往 Apple Watch 中添加音乐 首先需要你的手机中已经存在本地音乐,如果没有,要通过同步的方式从 iTunes 中添加音乐(macOS 中是在 Music 应用中) 手机中有了音乐文件以后 ...

  3. TogetherJS – 酷!在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

  4. Hexo中添加音乐(列表)、视频的代码

    以下为在HexoHexoHexo中添加音乐(列表).视频的代码.注意:在使用代码前要安装hexo−tag−aplayerhexo-tag-aplayerhexo−tag−aplayer[用于播放音乐( ...

  5. 如何在网站中添加验证码验证

    要在网站中添加验证码验证,可以按照以下步骤进行操作: 在HTML表单中添加验证码输入框.在表单中添加一个输入框,用于让用户输入验证码. 生成随机验证码并保存到会话中.在服务器端生成一个随机的验证码,并 ...

  6. 百度商桥放在php网站哪里_如何在网站中添加百度商桥?

    大部分新手站长都不知道竹子建站可以添加第三方的在线客服,商桥等功能.看到别人的网站设置的在线客服可以主动发消息,可以实时在线沟通,羡慕不能再羡慕了,告诉你不用羡慕,今天就教大家如何在网站中添加在线沟通 ...

  7. 【微杂志制作工具】名编辑电子杂志大师教程 | 如何在flash电子杂志中添加音乐

    (一)添加背景音乐 方法:打开名编辑电子杂志大师,进入模板设置版面,在工具栏选项下拉栏中找到声音选项,然后从电脑中添加音乐文件. (设计设置 -> 工具栏选项 -> 按钮栏 -> 声 ...

  8. 【制作多媒体演示文稿软件】Focusky教程 | 如何在focusky演示文稿中添加音乐?

    在Focusky(也称为"FS软件")演示文稿中添加音乐非常便捷,有以下两种方法: 方法一:添加本地音乐 单击工具栏上的"插入", 在下拉栏中选择"音 ...

  9. 如何在Mac上的视频中添加音乐?

    自己录的视频没有音乐伴奏总是不完整的,怎样添加上音乐呢?在本篇文章中,我为大家介绍的是如何在Mac上的视频中添加音乐? 在这里,我们向您展示如何在Mac计算机上将音乐添加到视频中.这些工具可离线使用, ...

最新文章

  1. TensorFlowSharp入门使用C#编写TensorFlow人工智能应用
  2. Table嵌套去掉子table的外边框
  3. 微信公众平台开发 - 动手篇。使用weinxinFundation开始一个微信公众平台的开发
  4. 如何再造一个百度贴吧兼谈如何改造园子的团队
  5. python爬虫技术可以干什么-Python除了爬虫,还能干啥?
  6. 如何找到SAP Spartacus UI可以扩展的outlet
  7. 建立Groovy开发环境
  8. rk3399_android7.1调试USB蓝牙模块小结
  9. 在ubuntu - linux系统下装TensorFlow(虚拟机)
  10. java 多环境 虚拟环境_Spring profile通过多种方法实现多环境支持
  11. blogspot博客搬家
  12. c# list转为json_C#中List集合转换JSON
  13. 综述:三维点云深度学习技术
  14. 3A算法—自动对焦(AF)
  15. macbookair 安装win11
  16. Color颜色——颜色模式、颜色基本特征、网页颜色以及其代码
  17. 联想SR158 安装CentOS7系统
  18. 亚马逊美国UL 299,第 11 版,2012 年 4 月 13 日- UL 安全干粉灭火器标准
  19. 【NIPS挑战赛优胜解】用机器学习判断基因变异所属类别
  20. Zero-Reference Deep Curve Estimation for Low-Light Image Enhancement

热门文章

  1. 如何用计算机求极限,计算器的极限_500字
  2. ftp服务器 自动备份,FtpCopy数据定时自动备份软件(FTP定时备份)
  3. 零基础也能快速上手的动画制作工具 | 万彩动画大师
  4. 【前端程序员的中秋节】中秋节,送你千盏孔明灯,万家灯火故事长
  5. JSP是什么?怎么使用?
  6. centos 安装scp
  7. 华为OD机试 - 完美走位(Python)
  8. 电脑中病毒了怎么修复?电脑中病毒了怎么办?
  9. mysql 数据库第二次安装不了_mysql数据库二次安装无法启动
  10. 自媒体平台做网赚不要指望着,平台广告分成!