您的位置：首页 > Web前端 > JavaScript

JavaScript高级面向对象（2）--调试工具的使用：音乐循环播放

2017-03-29 12:53 417 查看

说明（2017.3.29）：

1. 在调试工具console里输入var v = document.createElement("audio")，然后再source的watch里输入v回车，就能看到audio的所有事件，本次使用的是onended事件。

2. json不能直接遍历获得索引，只能通过for循环获取个数，再用for循环遍历。所以最好用数组存放歌名。

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>Document</title>
6 </head>
7 <body>
8     <audio id="music" src="Taylor Swift - Love Story.mp3" controls="controls" autoplay="autoplay">浏览器不支持</audio>
9
10
11 </body>
12 <script type="text/javascript">
13     var songs = {
14         1:"Taylor Swift - Love Story.mp3",
15         2:"unity.mp3",
16         3:"alone.mp3",
17         4:"chinese-supermarkets-stop-selling-brazilian-meat-over-food-safety-scandal.mp3"
18     };
19     // var music = document.getElementById("music");
20     // var num = (function(){
21     //     var num = 0;
22     //     for(var i in songs){
23     //         num ++
24     //     }
25     //     return num;
26     // })();
27     // var i = 1;
28     // setInterval(function(){
29     //     if(i < num){
30     //         if(music.ended){
31     //             music.src = songs[i+1];
32     //             i++;
33     //         }
34     //     }else{
35     //         i = 0;
36     //     }
37
38     // },1000);
39
40     var num = (function(){
41         var num = 0;
42         for(var i in songs){
43             num ++
44         }
45         return num;
46     })();
47     var i = 1;
48     music.onended = function(){
49         if(i < num){
50             music.src = songs[i+1];
51             i++;
52         }else{
53             i = 0;
54             music.src = songs[i+1];
55             i++;
56         }
57     };
58
59
60 </script>
61 </html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript高级 面向对象（2）--调试工具的使用：音乐循环播放

JavaScript高级面向对象（2）--调试工具的使用：音乐循环播放