0

0

bgsound 背景音乐 的一些常用方法及特殊用法小结_基础知识

php中文网

php中文网

发布时间:2016-05-16 18:27:42

|

1758人浏览过

|

来源于php中文网

原创

前几天,在qq群里有个xd问到bgsound的一些资料,确切地说是它的特殊用法。奇怪群里的人竟然都没几个能说出新意的,包括我!或许是这个标签不常用、或者是用处不大,所以,大家也就没有特意去研究过背景音乐吧。(以前自学这个东西时,本人也是仅仅出于好奇,玩玩而已^_^)
废话少说,来点真格的……

(以下是原文,不仅仅是bgsound哦,还有其他东东,慢慢see)

是用以插入背景音乐,但只适用於 ie,其参数设定不多。


src="your.mid"
设定 midi 或者是 mp3 档案及路径,可以是相对或绝对。
autostart=true
是否在音乐档传完之後,就自动播放音乐。true 是,false 否 (内定值)。
loop=infinite
是否自动反覆播放。loop=2 表示重复两次,infinite 表示重复多次。
wmp 与 real 既有各自专用的歌词表现形式,又有两者都通用的歌词表现形式。wmp 专用的歌词表现形式是通过 *.smi 文件实现的,real 专用的歌词表现形式是通过 *.rt 文件实现的,两者通用的歌词表现形式为 *.lrc 文件。

smi 歌词文件

请点播放键观看效果(有个缓冲过程,大家要等待片刻)。smi 文件有专门的制作软件,非常方便,方法后面详谈。可实现歌词的单行、多行及卡拉ok等特殊效果。smi 歌词实际是利用 wmp 的 closed caption 属性实现的。


代码如下:

复制代码 代码如下:









SMI 演示







<script> <br>function Play() <br>{ <br>aboutplayer.closedCaption.CaptioningID = "CapText"; <br>aboutplayer.closedCaption.SAMIFileName = "http://lrc.aboutplayer.com/goodbye.smi";; <br>aboutplayer.URL = "http://www.shijiren.net/wma/g00146001/g0014600101.wma";; <br>aboutplayer.controls.play(); <br>} <br>function Stop() <br>{ <br>aboutplayer.controls.stop(); <br>} <br></script>

问题的关键就是下面三句:

aboutplayer.closedCaption.CaptioningID = "CapText";

// 网页上显示歌词的位置 ID

aboutplayer.closedCaption.SAMIFileName = http://lrc.aboutplayer.com/goodbye.smi;

// SMI 歌词文件地址

aboutplayer.URL = http://www.shijiren.net/wma/g00146001/g0014600101.wma;

// 媒体文件地址

放在 aboutplayer.controls.play(); 的前面。其中 SMI 文件地址最好用绝对地址(随媒体文件地址是绝对、相对而变化)。若媒体文件与 SMI 文件通名同路径,则 SMI 文件地址可省略不写。

上面只是单曲歌词播放的实例,关于 SMI 歌词连续播放的经典版本请参阅谱乐制作的 BBSVisual For SMI。

RT 歌词文件

请点播放键观看效果。RT 歌词文件既可逐行同步,也可逐字同步,下面就是逐字同步的演示。

代码如下:

复制代码 代码如下:














这种方式的歌词同步谱乐称之为“精确制导”,即卡拉OK效果,逐字出现的时间与媒体播放精确同步。“网上卡拉OK”为谱乐首先创意,并实现了多种表现形式。

LRC 歌词文件

LRC 歌词中也能实现“精确制导”,具体效果参阅 http://aboutplayer.com/bbsvisual++,可“逐字变色”,感觉非常爽。但这种“精确制导”的歌词文件制作非常费时费力,不便于推广应用。为此,谱乐研究出了一种网页能自动“逐字变色”的播放器 BBSVisual。演示地址:http://qq.aboutplayer.com。

LRC 歌词作为一种通用的歌词文件,使用非常广泛,网上很多地方提供下载(谱乐歌词搜索与下载 http://lrc.aboutplayer.com)。下面是歌词文件“潘越云 - 野百合也有春天.lrc”的内容:

复制代码 代码如下:

[ti:野百合也有春天] // 歌曲名
[ar:潘越云] // 演唱者
[al:唯一] // 专辑名
[la:zh] // 语言类别
[by:谱乐] // 歌词编制人
[offset:500] // 时间参数(正数表示整体提前,负数表示整体滞后。通过在网页中编制语句实现)
[00:00.00]潘越云-野百合也有春天
[00:05.50www.aboutplayer.com
[01:21.05][00:07.14]仿佛如同一场梦
[01:24.52][00:10.42]我们如此短暂的相逢
[01:28.55][00:14.09]你像一阵春风轻轻柔柔吹入我心中
[01:35.69][00:21.58]而今何处是你往日的笑容
[01:43.01][00:29.10]记忆中那样熟悉的笑容
[02:18.93][01:49.26][00:35.40]你可知道我爱你想你念你怨你深情永不变
[02:27.36][01:57.61][00:43.62]难道你不曾回头想想昨日的誓言
[02:34.57][02:04.90][00:51.04]就算你留恋开放在水中娇艳的水仙
[02:42.00][02:12.16][00:58.54]别忘了寂寞的山谷的角落里野百合也有春天
[01:08.54]谱乐专栏
[02:48.65]啦...........啦...............啦..........

前面是歌词出场时间,可组成时间数组 Time(1)、Time(2) ……。后头为歌词内容,可组成歌词数组 Txt(1)、Txt(2) ……。LRC歌词文件的工作机理就是“通过即时判断,当歌曲播放时间到达 Time(1) 时,歌词 Txt(1) 显示”。Txt(1)“逐字变色”的时间算法为 (Time(2) - Time(1)) / Txt(1).Length。“歌词同步”谱乐的说教就到此为止,详细的工作过程请到谱乐论坛下载源码研究。

最后介绍两款歌词制作辅助软件。LRC2SMI:方便地将 LRC 文件转换为 SMI 文件。“精确制导”:制作准确的“逐字变色”的 LRC 歌词文件。谱乐论坛独家提供下载。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

常用网页播放器:


阿里云AI平台
阿里云AI平台

阿里云AI平台

下载
复制代码 代码如下:

src:音乐文件的路径及文件名;
autostart:true为音乐文件上传完后自动开始播放,默认为false(否)
loop:true为无限次重播,false为不重播,某一具体值(整数)为重播多少次
volume:取值范围为"0-100",设置音量,默认为系统本身的音量
starttime:"分:秒",设置歌曲开始播放的时间,如,starttime="00:10",从第10开始播放
endtime: "分:秒",设置歌曲结束播放的时间
width:控制面板的宽
height:控制面板的高
controls:控制面板的外观
controls="console/smallconsole/playbutton/pausebutton/stopbutton/volumelever"
·console:正常大小的面板
·smallconsole:较小的面板
·playbutton:显示播放按钮
·pausebutton:显示暂停按钮
·stopbutton:显示停止按钮
·volumelever:显示音量调节按钮
hidden:为true时可以隐藏面板


复制代码 代码如下:

<script language="javascript" defer> <br>var volv=phx.settings.volume; <br>setInterval("if(phx.playState==3){time.innerText=phx.controls.currentPositionString+'|'+phx.currentMedia.durationString}",1000); <br>setInterval("if(phx.playState==3){itcn.style.width=parseInt(245*(phx.controls.currentPosition/phx.currentMedia.duration))}",1000); <br>function volup(){ <br>if (volv<100){ <br>volv+=5; <br>phx.settings.volume=volv; <br>time.innerText=volv;} <br>else{time.innerText='最大';} <br>} <br>function voldown(){ <br>if (volv>0){ <br>volv-=5; <br>phx.settings.volume=volv; <br>time.innerText=volv;} <br>else{time.innerText='最小';} <br>} <br></script>










































复制代码 代码如下:

<script language="javascript" defer> <br>var volv=phx.settings.volume; <br>setInterval("if(phx.playState==3){time.innerText=phx.controls.currentPositionString+'|'+phx.currentMedia.durationString}",1000); <br>setInterval("if(phx.playState==3){itcn.style.width=parseInt(245*(phx.controls.currentPosition/phx.currentMedia.duration))}",1000); <br>function volup(){ <br>if (volv<100){ <br>volv+=5; <br>phx.settings.volume=volv; <br>time.innerText=volv;} <br>else{time.innerText='最大';} <br>} <br>function voldown(){ <br>if (volv>0){ <br>volv-=5; <br>phx.settings.volume=volv; <br>time.innerText=volv;} <br>else{time.innerText='最小';} <br>} <br></script>







































正在加载媒体。。。







各种播放器代码
1.avi格式

复制代码 代码如下:

















2.mpg格式

复制代码 代码如下:

































3.smi格式

复制代码 代码如下:


















4.rm格式

复制代码 代码如下:



















5.wmv格式

复制代码 代码如下:







































6.wma格式
[code]











[html]

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

705

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

233

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

117

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

22

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

61

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

30

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

669

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

58

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
c语言项目php解释器源码分析探索
c语言项目php解释器源码分析探索

共7课时 | 0.4万人学习

php初学者入门课程
php初学者入门课程

共10课时 | 0.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号