htmlaudio音频

htmlaudio音频 谢支星
文章标签: css js audio音频

HTML代码:
       <div id="top">
          <div class="top_left">
	  <h3>精选歌曲</h3>
	     <ul>
    	      <li>Jming - Alan Walker - Faded Alone (Albim Mashup)</li>
    	      <li>Mukyo木西 - 我的将军啊 (女版)</li>
    	      <li>侯强 - 回心转意</li>
    	      <li>买辣椒也用券 - 起风了</li>
    	      <li>枫宇辰 - 是时候表演真正的技术了 (DJ)</li>
    	    </ul>
	</div>
      <div class="top_right">
	<ul>
	  <li><img src="img/u=149880980,441535947&fm=27&gp=0.jpg"/></li>
	</ul>
				
	</div>
	
<div id="buttom_aa">
<video controls="controls" id="vd" style="float: right;"height="50px" width="410px"autoplay="autoplay" onended="xiays()">
	</video><br />
	<div class="yo">
	<input id="prev" type="button" value="上一首" onclick="xiays()"></input>
	<input  type="button" value="暂停/播放" onclick="playAndpaus()"></input>
	<input id="next" type="button" value="下一首" onclick="shangys()"></input>
	<input type="button" onclick="sound()"  value="开启静音" id="aa"/>
	<input type="button"  onclick="addVol()" value="音量+" />
	<input type="button"  onclick="cutVol()" value="音量-" />
	<select id="sele"></select>
	音量<span id="sp">0.1</span>
					
	</div>
				
    </div>
  </div>


CSS代码:
  body,ul,li,dl,dt,dd{
	margin: 0px;padding: 0px;list-style-type: none;
}
#top{
	width: 800px;
	height:420px;
	border: 1px solid darkgray;
	margin: 0px auto;
}
#buttom_aa{
	width: 799px;
	height: 81px;
	border: 1px solid darkgray;
	float: left;
	background-color: gray;
}
.top_left{
	width: 190px;
	height: 335px;
	border: 1px solid darkgray;
	float: left;
}
.top_right{
	width: 605px;
	height: 335px;
	border: 1px solid darkgray;
	float: right;
}
.top_left img{
	width: 50px;
	height: 50px;
	border: 1px solid darkgray;
	margin-left: 10px;
	margin-top:2px;	
}

h3{
	text-align: center;
}
.top_left li{
	font-size: 13px;
	text-align: center;
	line-height: 30px;
}


a{
	text-decoration: none;
	color: #333333;
}
.top_right img{
	width: 605px;
	height: 335px;
	border: 1px solid darkgray;
}
 

.yo input{
	margin-top: 8px;
}
span{
	font-size: 10px;
}
js代码:
  var vd=document.getElementById("vd");
	function playAndpaus(){
	  if(vd.paused){
		vd.play();
		document.getElementById("paly").value="暂停";
		}else{
		    vd.pause();
		    document.getElementById("paly").value="播放";
		  }
		}
	function sound(){
		if(vd.muted){
			vd.muted=false;
			document.getElementById("aa");
			}else{
			  vd.muted=true;
			  document.getElementById("aa");
			}
		    }
	function addVol(){
		if(vd.muted==true){
			vd.muted=false;
		}
	    if(vd.volume<1&&vd.volume>=0){
		vd.volume=vd.volume+0.1;
		document.getElementById("sp").innerHTML=vd.volume.toFixed(1);
			}
			if(vd.volume==1){
				alert("已经是最大声了!");
				}
			}
		function cutVol(){
			if(vd.muted==true){
			    vd.muted=false;
			}
		if(vd.volume<=1&&vd.volume>=0.1){
		       vd.volume=vd.volume-0.1;
		       document.getElementById("sp").innerHTML=vd.volume.toFixed(1);
		  }
		if(vd.volume<0.1){
			alert("已经是最小声了!");
				vd.muted=true;
				}
			}
    var music={"msi":[
	{"vl":"img/Jming - Alan Walker - Faded Alone (Albim Mashup).mp3","name":"Alan Walker - Faded Alone (Albim Mashup)"},
	{"vl":"img/Mukyo木西 - 我的将军啊 (女版).mp3","name":"木西 - 我的将军啊 (女版)"},
	{"vl":"img/买辣椒也用券 - 起风了.mp3","name":"买辣椒也用券 - 起风了"},
	{"vl":"img/侯强 - 回心转意.mp3","name":"侯强 - 回心转意"},
	{"vl":"img/枫宇辰 - 是时候表演真正的技术了 (DJ).mp3","name":"枫宇辰 - 是时候表演真正的技术了"}
		]};
	var index=0;
	var vd=document.getElementById("vd");
	var seles=document.getElementById("sele");
	var opp=seles.options;
		function xiays(){
			index++;
			if(index==music.msi.length){
				index=0;
			}
			vd.src=music.msi[index].vl;
			vd.play();
			xians();
					
			}
		function xians(){
		  for (var i=0;i<music.msi.length;i++) {
			if(vd.src.indexOf(music.msi[i].vl)>0){
				opp[i].selected=true;
				}
			}
		}
		function shangys(){
			index--;
			  if(index==-1){
				index=music.msi.length-1;
					}
					vd.src=music.msi[index].vl;
					vd.play();
					xians();
				}
			function oo(){
			  for (var j=0;j<music.msi.length;j++) {
				var op=music.msi[j].name;
				var ops=music.msi[j].vl;
				seles.add(new Option(op,ops));
				}
			}
			oo();
			seles.onchange=function(){
			  vd.src=this.value;
				vd.play();
			}

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :