数组实现audio音乐切换

马黑黑

直接上代码

1. <style>
   
2. #mbar { width: 260px; padding: 12px; background: olive; color: #fff; font-size: 10px; border-radius: 8px; }
   
3. #mbar span { display: inline-block; margin: 4px; width:20px; height: 20px; line-height: 20px; text-align:center; background:#444;border-radius: 50%; cursor:pointer;   }
   
4. </style>
   
5. 
   
6. <p><audio id="myPlay" controls="controls"></audio></p>
   
7. <div id="mbar">请选歌：</div>
   
8. 
   
9. <script language="javascript">
   
10. //数组声明：装载MP3地址
    
11. var arUrl = [
    
12.         "http://www.kumeiwp.com/sub/filestores/2022/02/06/3965bf6d018672044c50e65c5d6093ea.mp3",
    
13.         "http://www.kumeiwp.com/sub/filestores/2022/02/06/5a2895a951b6690e4b902e50a8ba95e3.mp3",
    
14.         "http://www.kumeiwp.com/sub/filestores/2022/02/06/e1f8126310fc4e0014a7f5227a86f2fe.mp3",
    
15.         "http://www.kumeiwp.com/sub/filestores/2021/03/11/9ae80e78b6e5e313ddc3582952746d04.mp3"
    
16. ];
    
17. //声明audio操作句柄
    
18. var myaud = document.getElementById('myPlay');
    
19. /* 将数组url写成链接数据 length是数组元素下标
    
20.     样式由 CSS 完成，这里只负责写URL数据传递
    
21. */
    
22. var str = "";
    
23. for(i=0; i<arUrl.length; i++) {
    
24.         str += "<span onclick="myaud.src='" + arUrl[i] + "'; myaud.play();">" + (i+1) + "</span>";
    
25. }
    
26. document.getElementById('mbar').innerHTML += str;
    
27. 
    
28. </script>

复制代码

马黑黑

数组的表示方法之一：中括号

var ar = ["张亮","王虎","何春"];

上面，定义了一个数组 ar ，该数组的数据有三个，即三个数组元素，都放在中括号里，两两之间用小角逗号隔开，最后一个不要也不能要逗号。数组元素可以是字符串，用引号表示，也可以是数据，如 [1, 2, 3]，还可以是其他类型的。

读取数组元素的值，用 ar[x] 方法，比如，ar[0]，将得到“张亮", ar[1]是王虎，ar[2]对应的是何春。数组的上下标从0开始，0表示的是第一个数组元素，1是第二个，以此类推。

数组有“长度”，表示为 ar.length ，指的是数组元素的总量，例如上述定义的 ar 数组，ar.length 的值为3，因为它有三个数组元素。数组长度值非常有用，它是我们描述全部数组元素的范围依据，因为尝试读取超出数组上下标的数组元素会报错。

马黑黑

上面谈到的是一维数组，有时候，我们需要数组能装载更多的数据内容，可以考虑用二维数组。二维数组结构举例如下：

var ar = [
    ["张亮", 28],
    ["王虎", 30],
    ["何春", 27]
];

每一个数组元素都是一个一维数组，合起来就是二维数组了。这时，我们要读取何春的年龄，怎么做？

ar[2][1]

前面三楼说过，数组的上下标从 0 开始，在 ar 这个数组变量中，何春的资料放在第三个数组，所以 ar[2] 指向何春，何春的资料由一维数组组成，我们设计的这个子数组，年龄放在第二位，根据数组上下标规定，ar[2]这个数组元素中的 [1] 就是何春的年龄数据。

二楼演示的选歌示例，没有提供歌曲相关消息，只知道歌的序号，这是因为所用到的是一维数组，若改用二维数组，把歌名也带入对应的URL，那我们就可以实现更直观的选歌方式：

1. <style>
   
2. .bar { width: 260px; padding: 12px; background: olive; color: #fff; font-size: 10px; border-radius: 8px; }
   
3. .bar span { display: block; padding: 4px; border-radius: 2px; cursor:pointer;   }
   
4. </style>
   
5. 
   
6. <p><audio id="mPlay" controls="controls" loop="loop"></audio></p>
   
7. <div id="bar" class="bar">请选歌：<br /><br /></div>
   
8. 
   
9. <script language="javascript">
   
10. //数组声明：装载MP3地址
    
11. var arUrl = [
    
12.         ["http://www.kumeiwp.com/sub/filestores/2022/02/06/717fb983dc22f7c6b5ec87a01f9ca0ff.mp3","May It Be"],
    
13.         ["http://www.kumeiwp.com/sub/filestores/2022/02/06/e1f8126310fc4e0014a7f5227a86f2fe.mp3","莎莉花园"],
    
14.         ["http://www.kumeiwp.com/sub/filestores/2022/02/03/e8f571d9f2ee61d70934c89452950be1.mp3","好运聚一糖"],
    
15.         ["http://www.kumeiwp.com/sub/filestores/2021/03/11/9ae80e78b6e5e313ddc3582952746d04.mp3","探清水河"]
    
16. ];
    
17. //声明audio操作句柄
    
18. var myaud = document.getElementById('mPlay');
    
19. /* 将数组url写成链接数据 length是数组元素下标
    
20.     样式由 CSS 完成，这里只负责写URL数据传递
    
21. */
    
22. var str = "";
    
23. for(i=0; i<arUrl.length; i++) {
    
24.         str += "<span onclick="myaud.src='" + arUrl[i][0] + "'; myaud.play();">" + (i+1) + ". " + arUrl[i][1] + "</span>";
    
25. }
    
26. document.getElementById('bar').innerHTML += str;
    
27. 
    
28. </script>

复制代码

红影

arUrl.length就是不管内容，只管个数了吧。这个帖子的命名好像又有与论坛冲突的地方呢，看到回复框有变化呢。

红影

怪事，回复后没问题，只是快捷回复的地方有变化。

红影

str += "<span onclick=\"myaud.src='" + arUrl[i] + "'; myaud.play();\">" + (i+1) + "</span>";

这一堆里的单引号、双引号都看晕。

比较了一下，+ (i+1) + 就是一维表示的序列号吧，为什么是带小圆圈的序列号？

关于二维的的，+ (i+1) + 同样是序列号，却是自然数字，然后加+ ". " + arUrl[i][1]，就得到了歌曲名。

为什么这两种表达序列号的方式不一样？

红影

如果是三列信息，是不是var ar这样表示["张亮", 28,"男"]
然后那一堆里变成加
" + (i+1) + ". " + arUrl[i][1] + arUrl[i][1][2] + "

这里面的双引号太多，不知道对不对

红影

好像后面那里多了[1]

马黑黑

红影 发表于 2022-2-6 13:56
如果是三列信息，是不是var ar这样表示["张亮", 28,"男"]
然后那一堆里变成加
" + (i+1) + ". " + arUrl[ ...

反正就是讲，子数组每一个又有多个子子数组时，读取方式依然按规律来，比如读取性别：

ar[0][2]

这是读取张亮的信息，ar[0] 指向张亮所在数据，[2] 指向张亮数组中的第三个数据

马黑黑

红影 发表于 2022-2-6 13:29
怪事，回复后没问题，只是快捷回复的地方有变化。

应该是选择器同名。以后我要改变一下命名规则了

马黑黑

红影 发表于 2022-2-6 13:48
str += "" + (i+1) + "";

这一堆里的单引号、双引号都看晕。

所以很多人不愿意用 innerHTML 这个方法，因为字符串的连缀很难清晰化，更愿意使用 appendChild 追加子元素，容易控制

马黑黑

红影 发表于 2022-2-6 13:56
好像后面那里多了[1]

arUrl[1][2] 这个写法不对，这一句是三维数组了，你提出的那个构建，还是二维数组：

[
    [1, 6, 7, 8],
    [2, 4, 7, 0]
]

上面那样，不论子数组有多少数值，数组是二维的

JS不建议操作超过二维的数组

马黑黑

这个帖子怪怪的，可能是昨天对妖怪不敬的结果

红影

马黑黑 发表于 2022-2-6 14:00
反正就是讲，子数组每一个又有多个子子数组时，读取方式依然按规律来，比如读取性别：

ar[0][2]

要想读取3个数据改怎么写呢，现在还是读取的2个数据啊。

红影

马黑黑 发表于 2022-2-6 14:00
反正就是讲，子数组每一个又有多个子子数组时，读取方式依然按规律来，比如读取性别：

ar[0][2]

嗯嗯，知道了

红影

马黑黑 发表于 2022-2-6 14:01
应该是选择器同名。以后我要改变一下命名规则了

现在好了，看快捷回复那里正常了

红影

马黑黑 发表于 2022-2-6 14:04
所以很多人不愿意用 innerHTML 这个方法，因为字符串的连缀很难清晰化，更愿意使用 appendChild 追加子元 ...

我每次看到js都有点头晕，应该和这一串字符串有关

马黑黑

红影 发表于 2022-2-6 14:23
我每次看到js都有点头晕，应该和这一串字符串有关

有些代码语句短，也是令人头疼的

红影

马黑黑 发表于 2022-2-6 20:48
有些代码语句短，也是令人头疼的

短的总归会好点的吧

马黑黑

红影 发表于 2022-2-6 22:21
短的总归会好点的吧

一般来说简短代码可能好理解，但要看它是什么。比方说：

while (a<=20) {
    doit();
    a++;
}

这里，a++，表示 a 在循环中每一次加 1。这个，懂了之后就懂。