标准按钮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>