点击图⽚播放⾳乐实现
点击图⽚播放⾳乐实现
在做⽹页设计期末作业时，为了给作业添加⼀些⾊彩，就在⽹上学习了⼀下，实现点击图⽚播放⾳乐或背景⾳乐的效果。在这⾥分享⼀下，⼀来可以给需要的同学们学习，⼆来记录⼀下⾃⼰的学习。
思路：1.在主页上放⼀个div，设置div的⼤⼩和位置
2.div要放在垂直Z轴上，使它在页⾯的最上⽅，⽤绝对定位或者固定定位固定在⼀个你喜欢的位置
3.div⾥应该有你要放的图⽚img，⾳乐audio
4.通过js代码触发事件播放或停⽌
图⽚:
图⽚:
html代码：
<div id="md">
<span>点击图⽚播放</span>
</div>
<div id="mc">
<audio id="music" src="../html_work/music/harrisonwheeler - Vacation.mp3 ⾳乐路径"></audio>
<img src="../html_work/images-1/imgg-1.gif 图⽚路径" width="80px" height="80px" title="点击播放⾳乐" onClick="play()">
</div>
<script src="../html_work/js/music.js  ⾳乐js路径"></script>
css代码：
#mc {
z-index:10px;
position: absolute;
/* position: fixed; */
left:40PX;
top:140px;
width:40px;
height:40px;
html播放音乐代码
border-radius:50%;
}
#md {
position: absolute;
/* position: fixed; */
left:40PX;
top:230px;
width:100px;
height:60px;
}
#md span {
color:rgb(15,86,240);
}
#mc img {
border-radius:50%;
}
js代码：
var audio = ElementById('music');
audio.pause();//打开页⾯时不播放⾳乐，
}
function play(){
var audio = ElementById('music');
if(audio.paused){
audio.play();
}else{
audio.pause();
audio.currentTime =0;//⾳乐从头播放
}
}
本⼈为初学者，有什么不对的地⽅⼤家可以指出。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。