由于期末大作业我想插入一个背景音乐,实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码
1
|
< audio src = "../medio/花海.mp3" loop = "loop" controls = "controls" autoplay = "autoplay" ></ audio > |
但是效果并不理想,打开了网页并不会自动播放,于是乎,我百度了各种各样的方法,但始终没有实现想要的效果。于是在整理大作业的偶然间,我居然发现了真相!
首先看原本的代码打开路径,就是一个单纯的网页
1
|
myself.html |
再看能成功实现自动播放的网页路径
1
|
html/myself.html |
发现问题所在没?问题就出现在跳转上,也就是说想实现自动播放背景音乐的效果不能应用在首页路径上,而是要放在后面的路径。
举个栗子
看这是一个网页的时候
这是代码
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >index</ title > </ head > < body > < audio src = "../medio/花海.mp3" loop = "loop" controls = "controls" autoplay = "autoplay" ></ audio > </ body > </ html > |
然而这实现不了自动播放的效果
下面重头戏来了
此时我创建了两个文件夹
index的代码
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >index</ title > </ head > < body > < a href = "music.html" >音乐</ a > </ body > </ html > |
music的代码
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >music</ title > </ head > < body > < audio src = "../medio/花海.mp3" loop = "loop" controls = "controls" autoplay = "autoplay" ></ audio > </ body > </ html > |
这个就可实现自动播放的效果了
总结一下,两个方法在代码上没什么区别,第二种方法就是多了一个跳转网页的操作而已。小编推测可能是在html中音频自动播放需要缓冲时间,但是在单独使用一个网页时没有缓冲时间,而用跳转网页恰恰弥补了这一缓冲时间。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容