HTML5 javascript 音乐音频

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML-音频和视频</title>
</head>

<body>
1- 播放音频：<br>
controls显示播放器界面<br>
 <audio id="a"  align="right" autoplay="autoplay" loop controls>
    <source    src="冯曦妤 - 我在那一角落患过伤风.mp3" type="audio/mpeg"/>
 </audio>
 <br>
  <button onClick="previousmusic();">上一曲</button>
  <button onClick="nextmusic();">下一曲</button>

 <br> <br> <br> <br>
  <video  id="v1" controls>
  <source    src="1.mp4" type="video/mp4"/>
  </video>
  
  <br>
  <button onClick="playmusic();">播放</button>
  <button onClick="pausemusic();">暂停</button>
  
  
  <script>
    var myvideo = document.getElementById("v1");
    var current = 0;
    
     var music = new Array();
     music[0]='Beyond-谁伴我闯荡.mp3';
     music[1]='Alan Walker-Fade.mp3';
     music[2]='田馥甄 - 小幸运.mp3';
    function playmusic(){
            myvideo.play();
    }
    function pausemusic(){
            myvideo.pause();
    }
    
    
    function previousmusic(){
        if(current>0){
            var audiomusic = document.getElementById("a").src = music[--current] ;
            
        }else{
            var audiomusic = document.getElementById("a").src = "冯曦妤 - 我在那一角落患过伤风.mp3" ;
            alert("当前播放的是第一首歌曲");
        }
    }
    function nextmusic(){
        if(current<music.length){
        var audiomusic = document.getElementById("a").src = music[++current] ;
        }else{
           alert("这是最后一首歌了");
        }
    }
  </script>
</body>
</html>
实现代码图：
posted on 2016-07-15 10:05 王铭霞阅读(274) 评论(0) 编辑收藏举报