纯代码实现添加背景音乐可添加到小工具中

纯代码实现添加背景音乐可添加到小工具中

 

 

 

  正在播放《<span id="nameofmusic">Yessum</span>》
<audio src="歌曲地址1" autoplay="autoplay" controls="controls" loop="loop" preload="auto" id="bgAudio">
你的<a href="https://www.qiuyegen.com/tag/%e6%b5%8f%e8%a7%88%e5%99%a8" title="查看所有文章关于 浏览器" target="_blank">浏览器</a>不支持背景音乐,请更换浏览器!!!
</audio>
<!--背景音乐音量-->
<script>document.getElementById("bgAudio").volume = 0.2;</script>
<!--音乐列表-->
<ul style="list-style-type: none;">
    <li id="music1" name="music1" onclick="changemusic(this)">Yessum</li>
    <li id="music2" name="music2" onclick="changemusic(this)">明天你好</li>
    <li id="music3" name="music3" onclick="changemusic(this)">临安初雨</li>
</ul>
<script type="text/javascript">
    function changemusic(music){
        if(music.innerHTML==("Yessum")){
            document.getElementById("bgAudio").src="歌曲地址1";
            document.getElementById("nameofmusic").innerHTML=("Yessum");
            document.getElementById("bgAudio").load();
        }
        if(music.innerHTML==("明天你好")){
            document.getElementById("bgAudio").src="歌曲地址2";
            document.getElementById("nameofmusic").innerHTML=("明天你好");
            document.getElementById("bgAudio").load();
        }
        if(music.innerHTML==("临安初雨")){
            document.getElementById("bgAudio").src="歌曲地址3";
            document.getElementById("nameofmusic").innerHTML=("临安初雨");
            document.getElementById("bgAudio").load();
        }
       
    }
</script>

 

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧

个人中心
今日签到
有新消息 消息中心
有新私信 私信列表
搜索