很多小伙伴都会用HTML来编写一些网页,如何让网页变得更有美感,增加一个背景音乐就很有必要了。
这里给大家介绍一个我自己用的方法:点击图片播放音乐,再次点击则停止音乐.
1.我们需要将用到的音频文件导入到我们的网页中
<audio id="music" src="music/yinanping.flac" loop autoplay></audio>
2.赋给图片点击的方法
<img src="images/cql.jpg" onClick="play()" alt="user">
3.编写play()方法
<script>
window.onload = function(){
var audio = document.getElementById('music');
audio.pause();//打开页面时无音乐
}
function play() {
var audio = document.getElementById('music');
if (audio.paused) {
audio.play();
document.getElementById('musicImg').src="images/play.png";
}else{
audio.pause();
audio.currentTime = 0;//音乐从头播放
document.getElementById('musicImg').src="images/stop.png";
}
}
</script>
4.效果图
5.完整样式代码
<div id="fh5co-content-section">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="fh5co-testimonial text-center animate-box">
<h2>意难平</h2>
<audio id="music" src="music/yinanping.flac" loop autoplay></audio>
<figure>
<span class="music">点击播放音乐------> </span>
<img src="images/cql.jpg" onClick="play()" alt="user">
</figure>
<blockquote>
<p style="font-size: 20px">“穿越 往昔 莲坞边,碧潭 旧影 犹少年,时光迁 梦浅 潋滟错觉,愿执一笔 寄予云梦故人念,意难平 笑问苍天,回首却 不觉已过经年,无别无离 无忧无缘,可还闻得 一声阿羡。”</p>
</blockquote>
<span>陈情令</span> </div>
</div>
</div>
</div>
</div>