点击图片播放音乐实现

点击图片播放音乐实现

在做网页设计期末作业时，为了给作业添加一些色彩，就在网上学习了一下，实现点击图片播放音乐或背景音乐的效果。在这里分享一下，一来可以给需要的同学们学习，二来记录一下自己的学习。

思路：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;
    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代码：

window.onload = function() {
    var audio = document.getElementById('music');
    audio.pause(); //打开页面时不播放音乐，
}

function play() {
    var audio = document.getElementById('music');
    if (audio.paused) {
        audio.play();
    } else {
        audio.pause();
        audio.currentTime = 0; //音乐从头播放
    }
}

本人为初学者，有什么不对的地方大家可以指出。