怎么写audio变漂亮,写CSS

html-css021

怎么写audio变漂亮,写CSS,第1张

<audio>的时候不要用controls属性, 然后自己用div之类标签,定义css样式美化起来,

最后用js捕获audio事件,基本就是src路径 pause暂停 load加载 play播放这些。

如果要做播放的进度条,也可以用个div标签来做,计算整个音频的时间除以比值,js用setTimeout逐渐走div的背景色。

embed

示例:<embed src="your.mid">

(二)、属性设置:

1、自动播放:

语法:autostart=true、false

说明:该属性规定音频或视频文件是否在下载完之后就自动播放。

true:音乐文件在下载完之后自动播放;

false:音乐文件在下载完之后不自动播放。

示例:<embed src="your.mid" autostart=true>

<embed src="your.mid" autostart=false>

2、循环播放:

语法:loop=正整数、true、false

说明:该属性规定音频或视频文件是否循环及循环次数。

属性值为正整数值时,音频或视频文件的循环次数与正整数值相同;

属性值为true时,音频或视频文件循环;

属性值为false时,音频或视频文件不循环。

示例:<embed src="your.mid" autostart=true loop=2>

<embed src="your.mid" autostart=true loop=true>

<embed src="your.mid" autostart=true loop=false>

3、面板显示:

语法:hidden=ture、flase

说明:该属性规定控制面板是否显示,默认值为flase。

ture:隐藏面板;

flase:显示面板。

示例:<embed src="your.mid" hidden="ture">

<embed src="your.mid" hidden="no">

4、开始时间:

语法:starttime=mm:ss(分:秒)

说明:该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。

示例:<embed src="your.mid" starttime="00:10">

5、音量大小:

语法:volume=0-100之间的整数

说明:该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。

示例:<embed src="your.mid" volume="10">

1、确定你的播放器的尺寸

建议使用音画其他部件,如图片、视频的尺寸作为播放器尺寸。默认播放器尺寸:880*550

2、输入或粘贴MP3网址

粘贴操作:先在外部将网址作“复制”,然后鼠标指向输入栏,按鼠标右键,选“全选”,再选“粘贴”。

一旦输入或粘贴MP3网址后,如网址有效,就开始播放。

“MP3备份网址”作用是当MP3网址(主网址)失效时,播放器启用MP3备份网址。这是可选项。如不需要备份网址,则跳过。

3、选择播放器控制按钮

“控制按钮选择:”下方方框打钩或点击图例。

.透明按钮:默认。全透明按钮,尺寸自动取播放器尺寸。控制音乐播放或暂停直接点击画面。(此生成器为了能输入,采用文字按钮代替)

.图标按钮:三角为播放按钮,两竖为暂停按钮。

.英文按钮:PLAY为播放按钮,STOP为暂停按钮。

当选择图标、英文按钮时,点击“-”或“+”可以缩小或放大该按钮。鼠标指向按钮,按住鼠标左键,可将按钮拖到你需要的位置后放开鼠标。改变播放器尺寸时,按钮自动取中心位置。

4、选择滚动字幕·

如果需要滚动字幕。请在“滚动字幕”右边方框打钩。清除原先文字(鼠标指向文字,按右键,选“全选”,再按右键,选“删除”),然后在输入栏内粘贴(输入)一行文字。

.修改滚动字幕文字属性:字体、字号、颜色等

.发光颜色亮度为0,不发光,“文字发光颜色”参数无效。

.字幕显示宽度:默认880

.字幕移动速度:默认1。数字大,移动快。

修改以上参数后必须按“确定”才有效。

字幕位置:默认水平0、垂直470可以拖动字幕到所需位置。操作方法:鼠标指向字幕按左键点击一下,出现绿条之后按下鼠标左键,拖动字幕。到位后放开鼠标。

5、复制代码

制作过程(或“字幕修改参数”按“确定”后)同步更新生成代码。

代码(一):所有参数都写在博客代码中。

制作结束后,点击生成代码(一)下面的“复制”按钮,自动将生成代码复制到你的电脑的“粘贴板”了,可直接“粘贴”博文代码编辑栏。预览博文观察效果。

代码(二):所有参数都写gif文件中。

制作结束后,点击生成代码(二)下面的“复制”按钮,自动将生成的博客代码和gif文件内容复制到你的电脑的“粘贴板”了,可直接“粘贴”电脑的“记事本”。然后将博客代码和gif文件内容分离,上传gif文件得到网址后,将网址替换博客代码中的”XXX.gif“,最后将博客代码粘贴到博文代码编辑栏。预览博文观察效果。

建议使用”代码(二)“方法,代码简洁,且适用各种浏览器。

6、在博文中调整播放器的“相对定位”代码。

......

这是“相对定位”代码。

.TOP: Xpx,离上一元素底部的距离。LEFT: Xpx,离博文页面左边的距离。