怎样制作音乐盒

html-css08

怎样制作音乐盒,第1张

个性化音乐盒制作方法详细教程

效果描述:点击歌曲(音乐)名称,在页面左上角跳出一个属于你自己风格的个性化音乐盒。效果演示:演示1 演示2

详细制作流程:一、音乐盒模板的制作

1、选择大小适中的一个图片作为你的音乐盒背景。你可以先用图片处理软件对背景图片稍做处理(裁减、润色等);

2、在你的歌曲(音乐)所在页面添加一个文章列表,将文章列表隐藏;

3、在文章列表发表一篇新文章,将你选择的音乐盒背景图片上传,上传成功后,复制背景图片URL地址;

4、在文章列表发表另一篇新文章,用来制作、调试你的音乐盒。方法:在可视化编辑模式下,点击“插入表格”,在跳出的对话框(表格属性)选择(输入)N行× 1列(插入多少行自己定,主要是为了定位音乐盒内文字、播放器等),在表格宽度、高度处输入你背景图片大小的宽度、高度值,在“背景图片”处粘贴你刚才复制的背景图片地址,按“确认”。

5、在音乐盒背景输入你的音乐盒名称,如XX居音乐视听(室),歌曲(音乐)名称、演绎者等等;

6、切换到html编辑模式,在音乐盒适当位置插入播放器代码:<EMBED loop="-1" src=歌曲(音乐地址) width=宽度 height=高度 type=audio/x-pn-realaudio-plugin mime-types="mime.types" Initfn="load-types" controls="ControlPanel,StatusBar,TACCtrl" maintainaspect="true" loop="false" autostart="true">(此代码基本上适用于任何一种格式的音乐,其中:autostart值“ture”是指音乐自动播放,如果不想自动播放,可将ture改为false;宽度、高度值不能大于背景图片的宽度与高度)。提示:如果在html模式下你不清楚上面代码该插在什么地方,你可以先在可视化模式下在你想放播放器的位置输入随便的文字如“中国”,然后再切换到html模式下将播放器代码代替“中国”即可。

7、插入播放器代码后,再切换到可视化模式,在播放器下面再加入音乐下载地址(此举完全是为了方便浏览者下载,建议下载地址不少于2个)、断链报告(方便浏览者能报告站长音乐链接失效)。

8、以上4-7步骤完成后,按“确认”发表文章。

9、打开你刚才所发表的文章(也就是你刚做好的音乐盒模板),你就可以看到音乐盒的样子了。这时,你可以采取可视化、html模式相结合的办法对音乐盒内播放器的位置、文字的大小、色彩等作进一步的美化,总的原则就是使你的播放器达到最美观为止。感到满意后,将音乐盒表格边框大小值改为0。

10、最后,在html模式下,在你看到的代码前面加上<DIV id=Layer1 style="Z-INDEX: 8LEFT: 0pxWIDTH: 299pxPOSITION: absoluteTOP: 0pxHEIGHT: 44px">,后面加上</DIV>。按“确认”发表文章。说明:加入上面的代码是为了使音乐盒定位于文章页面的左上角。当然,如果你用的是VIP用户的空白模板,此步也可以省略。不过由于空白模板的某些缺陷,效果没有用代码的好。

11、至此,你的个性化音乐盒已经制作完成!以后每首歌曲(音乐)都套用你做好的音乐盒模板,修改歌曲(音乐)名称、演绎者、音乐链接地址、音乐下载地址就可以了。注:歌曲列表可以在你第2步创建的文章列表中发表。

二、歌曲(音乐)页面的链接创建

此一步骤的目的是在你所在的歌曲(音乐)页面创建你在文章列表的歌曲链接。此步骤用如下代码:<a href=# onClick="window.open('你歌曲列表的相应歌曲的文章地址', 'aaa', 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=no,width=宽度(与音乐盒宽度同),height=高度(与音乐盒高度同),left=0,top=0,fullscreen=0,channelmode=0','-blank')">歌曲名称</a>

注:歌曲链接的定位可以参考第6步播放器定位的方法。

背景音乐代码精简 1、<embed src="背景音乐网址" hidden="true" autostart="true" loop="true"> --------hidden="true"表示隐藏播放,即不显示播放器的外观,若要想显示,把"true" 替换为"false"即可,这样为默认是最小化播放,若还想具体显示播放器的大小,另加上height="高度值" width="宽度值" 就可以了。 -------autostart="true"表示当前页一载入则自动播放,若不希望播放改为autostart="false" 即可... ------ loop="true"表示无限次循环播放音乐直到当前页关闭为止,不想循环播放替换为 loop="false"就OK了 2、<embed src="背景音乐网址" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" > -----------loop="-1" 表示无限次循环播放,可设置播放次数,用具体数字代替即可,比如我希望它播放两次,则loop="2" ---------controls="ControlPanel"这个控制选项可省略 --------width="0" height="0"表示隐藏播放,和前面的一样。 若欲设置播放器的外观,则替换为具体的数值就可以了,比如width="123" height="100" -------------------------------------------------- 其实要说最简化的播放背景音乐的代码,则下面的代码是最简单的了---> <embed src="背景音乐网址" > ----------------------------------------------------- 另外:bgsound src="背景音乐路径" loop="-1"> 这个只支持IE浏览器,而且是完全下载完后才开始播放,不像前面所说的格式那样可以一边缓冲一边播放。这个一般用于mid音乐或较小的mp3,wav格式的音乐. 若是较大的文件还是用前面所说的格式吧~~ <bgsound src="背景音乐路径" loop="-1">这个随浏览器的打开而播放,当最小化窗口时即停止播放,当最大化窗口时又开始播放。 而,<embed src="背景音乐网址" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" >常用于mid,,wav,mp3类型的音乐类型. 这个则不管是否最小化窗口都始终播放,直至关闭当前窗口为止~~ 支持的音乐文件类型:只支持MP播放器所支持的音乐格式,比如mp3,asf,wma,asx等等. 不支持rm,ram.... 视频文件的插入方法也和上面所说的一样,设置好合适的 音乐代码解释 <embed autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" src=" http://guest.anyp.cn/uploads/01.mid">解释一下: AUTOSTART="TRUE / FALSE" 是否要在音乐档传完之后,就自动播放音乐。 TRUE 是要 FALSE 是不要,内定值是不要。 LOOP="TRUE / FALSE / 整数" 设定是否要自动反覆播放,LOOP=2 表示重复两次,若要无限次重复可用 LOOP="TRUE" WIDTH 和 HIGH="整数" 设定控制面版的宽度和高度 CONTROLS="CONSOLE / SMALLCONSOLE / PLAYBUTTON / PAUSEBUTTON / STOPBUTTON / VOLUMELEVER" 设定控制面板的样子,预设值是 CONSOLE CONSOLE 一般正常的面板 SMALLCONSOLE 较小的面板 PLAYBUTTON 只显示播放按钮 PAUSEBUTTON 只显示暂停按钮 STOPBUTTON 只显示停止按钮 VOLUMELEVER 只显示音量调整钮