首页 > 代码库 > 添加背景音乐由icon控制

添加背景音乐由icon控制

标准按钮icons样式:

http://fontawesome.io/icons/



<!--添加音乐播放器-->
<div  style="padding: 2em;TEXT-ALIGN: center;">
    <audio id="myaudio" src="http://www.mamicode.com/${path}/music/Jason Mraz - I‘m Yours.mp3"  loop="false" hidden="true"  ></audio>
    
    <a id="playBtn" href="javascript:void(0)" onclick="autoPlay()"><i class="fa fa-play fa-2x"></i></a>
    <a id="stopBtn" href="javascript:void(0)" onclick="autoStop()" style="display: none"><i class="fa fa-pause fa-2x"></i></a>
</div>

 

<script language="javascript" type="text/javascript">
function autoPlay(){
    var myAuto = document.getElementById(‘myaudio‘);
    myAuto.play();
    
    document.getElementById(‘playBtn‘).style.display = "none";
    document.getElementById(‘stopBtn‘).style.display = "";
}

function autoStop(){
    var myAuto = document.getElementById(‘myaudio‘);
    myAuto.pause();// 不是stop()
    
    document.getElementById(‘playBtn‘).style.display = "";
    document.getElementById(‘stopBtn‘).style.display = "none";
}
</script>