添加背景音乐由icon控制

标准按钮icons样式:

http://fontawesome.io/icons/

使用icons时在head头文件中添加如下link即可以使用,不需要引入什么插件:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">



<!--添加音乐播放器代码如下-->
<div  style="padding: 2em;TEXT-ALIGN: center;">
    <audio id="myaudio" src="${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>

 

posted @ 2014-07-02 18:53  静子1019  Views(290)  Comments(0Edit  收藏  举报