论坛 › 【与图有染】 › 背景音乐启停控制

195400 发表于 2019-12-20 11:28

背景音乐启停控制

<div id="播放背景音乐"></div>
<script type="text/javascript">
var bkmusic = function(bkmusic_para)        {

        var bkpichold = document.getElementById(bkmusic_para.holdId);
        bkpichold.style.width = bkmusic_para.width;
        bkpichold.style.height = bkmusic_para.height;
       
                var imgEle = document.createElement('img');
                imgEle.src = bkmusic_para.tp;
                imgEle.style.width = bkmusic_para.width;
                imgEle.style.height = bkmusic_para.height;
               
                bkpichold.appendChild(imgEle);
       
        var audioEle = document.createElement('audio');
        audioEle.id = "audioEle";
        audioEle.src = bkmusic_para.mp3url;
        /*audioEle.autoplay = "true";*/
        audioEle.loop = "true";
        bkpichold.appendChild(audioEle);
       
       
        if(typeof(bkmusic_para.movMouse)=='undefined')        {
                bkpichold.onclick = function(e)        {
                        if(audioEle.paused)        audioEle.play();
                        else        audioEle.pause();
                }
        }
        else        {console.log(typeof(bkmusic_para.movMouse));
                bkpichold.onmouseover = function(e)        {
                        console.log("move in");
                        try        {
                                if(audioEle.paused==true)        audioEle.play();
                        }
                        catch(ev){}
                }
                bkpichold.onmouseout        = function(e)        {
                        try        {
                        if(audioEle.paused==false)        audioEle.pause();
                        }
                        catch(ev){}
                }
        }
}

var bkmusic_para = {
        width:"683px",
        height:"920px",
        tp:"http://p1.qhmsg.com/t013406c5ed8524cf8f.jpg",
        mp3url:"http://link.hhtjim.com/kw/22855422.mp3",
        holdId:"播放背景音乐",
        movMouse:'1'
        };

setTimeout(function(){bkmusic(bkmusic_para);}, 1000);
</script>

绿地水池 发表于 2019-12-20 11:36

控制按钮在何处？

195400 发表于 2019-12-20 11:40

绿地水池 发表于 2019-12-20 11:36
控制按钮在何处？

鼠标移进画面 播放音乐，移出则停止

￡渴々望〤 发表于 2019-12-20 11:49

好漂亮的制作

￡渴々望〤 发表于 2019-12-20 11:49

分享老师的精彩佳贴

￡渴々望〤 发表于 2019-12-20 11:49

期待欣赏你更多的精彩佳作

195400 发表于 2019-12-20 11:52

￡渴々望〤 发表于 2019-12-20 11:49
好漂亮的制作

时光隧道 发表于 2019-12-20 12:15

欣赏唯美制作，赞一个！

时光隧道 发表于 2019-12-20 12:15

遥祝冬安，并祝创作愉快！

绿地水池 发表于 2019-12-20 12:18

195400 发表于 2019-12-20 11:40
鼠标移进画面 播放音乐，移出则停止

谢谢。自己动手，丰衣足食。

查看完整版本: 背景音乐启停控制