HTML5音乐播放器

最新推荐文章于 2024-07-23 03:56:56 发布

iteye_3607

最新推荐文章于 2024-07-23 03:56:56 发布

阅读量163

点赞数

文章标签： javascript ViewUI

<!DOCTYPE html>
<html>
<head>
<style>
body{color:white; font-family:Verdana; white-space:nowrap; font-weight:bold;}
.play-back{margin:0 0 0 90;}
.player-button{
margin:0 0 0 50;
font-weight:bold;
font-family:Verdana;
background-color:deepskyblue;
color:white;
font-size:15;
width:90;
height:28;
display: inline-block;
border: 2 solid #B6B6B6;
border-color: gainsboro gainsboro gainsboro gainsboro;
vertical-align: top;
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;
border-color: deepskyblue;
}

.player-button:hover{
font-weight:bold;
font-family:Verdana;
background-color:deepskyblue;
color:white;
font-size:15;
width:90;
height:28;
display: inline-block;
border: 2 solid #B6B6B6;
border-color: gainsboro gainsboro gainsboro gainsboro;
vertical-align: top;
transition:border linear .2s,box-shadow linear .5s;
-moz-transition:border linear .2s,-moz-box-shadow linear .5s;
-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
outline:none;
border-color: deepskyblue;
box-shadow:0 0 0.5em deepskyblue;
-moz-box-shadow:0 0 0.5em deepskyblue;
-webkit-box-shadow:0 0 0.5em deepskyblue;
}
</style>

</head>

<body>

<audio id="clickSound">
<source src="歌曲地址">
</audio>

<button id="toggle" οnclick="toggleSound()" class="player-button">Play</button>

<script type="text/javascript">
function toggleSound(){
var music=document.getElementById("clickSound");
var toffle=document.getElementById("toggle");

if(music.paused){
music.play();
toggle.innerHTML="Pause ";
}
else{
music.pause();
toggle.innerHTML="Play";
}
}
</script>

</body>
</html>