数组实现audio音乐切换
本帖最后由 马黑黑 于 2022-2-6 11:36 编辑直接上代码
<style>
#mbar { width: 260px; padding: 12px; background: olive; color: #fff; font-size: 10px; border-radius: 8px; }
#mbar span { display: inline-block; margin: 4px; width:20px; height: 20px; line-height: 20px; text-align:center; background:#444;border-radius: 50%; cursor:pointer; }
</style>
<p><audio id="myPlay" controls="controls"></audio></p>
<div id="mbar">请选歌：</div>
<script language="javascript">
//数组声明：装载MP3地址
var arUrl = [
"http://www.kumeiwp.com/sub/filestores/2022/02/06/3965bf6d018672044c50e65c5d6093ea.mp3",
"http://www.kumeiwp.com/sub/filestores/2022/02/06/5a2895a951b6690e4b902e50a8ba95e3.mp3",
"http://www.kumeiwp.com/sub/filestores/2022/02/06/e1f8126310fc4e0014a7f5227a86f2fe.mp3",
"http://www.kumeiwp.com/sub/filestores/2021/03/11/9ae80e78b6e5e313ddc3582952746d04.mp3"
];
//声明audio操作句柄
var myaud = document.getElementById('myPlay');
/* 将数组url写成链接数据 length是数组元素下标
样式由 CSS 完成，这里只负责写URL数据传递
*/
var str = "";
for(i=0; i<arUrl.length; i++) {
str += "<span onclick=\"myaud.src='" + arUrl + "'; myaud.play();\">" + (i+1) + "</span>";
}
document.getElementById('mbar').innerHTML += str;
</script>
本帖最后由 马黑黑 于 2022-2-6 11:52 编辑
数组的表示方法之一：中括号
var ar = ["张亮","王虎","何春"];
上面，定义了一个数组 ar ，该数组的数据有三个，即三个数组元素，都放在中括号里，两两之间用小角逗号隔开，最后一个不要也不能要逗号。数组元素可以是字符串，用引号表示，也可以是数据，如 ，还可以是其他类型的。
读取数组元素的值，用 ar 方法，比如，ar，将得到“张亮", ar是王虎，ar对应的是何春。数组的上下标从0开始，0表示的是第一个数组元素，1是第二个，以此类推。
数组有“长度”，表示为 ar.length ，指的是数组元素的总量，例如上述定义的 ar 数组，ar.length 的值为3，因为它有三个数组元素。数组长度值非常有用，它是我们描述全部数组元素的范围依据，因为尝试读取超出数组上下标的数组元素会报错。 上面谈到的是一维数组，有时候，我们需要数组能装载更多的数据内容，可以考虑用二维数组。二维数组结构举例如下：
var ar = [
["张亮", 28],
["王虎", 30],
["何春", 27]
];
每一个数组元素都是一个一维数组，合起来就是二维数组了。这时，我们要读取何春的年龄，怎么做？
ar
前面三楼说过，数组的上下标从 0 开始，在 ar 这个数组变量中，何春的资料放在第三个数组，所以 ar 指向何春，何春的资料由一维数组组成，我们设计的这个子数组，年龄放在第二位，根据数组上下标规定，ar这个数组元素中的 就是何春的年龄数据。
二楼演示的选歌示例，没有提供歌曲相关消息，只知道歌的序号，这是因为所用到的是一维数组，若改用二维数组，把歌名也带入对应的URL，那我们就可以实现更直观的选歌方式：
<style>
.bar { width: 260px; padding: 12px; background: olive; color: #fff; font-size: 10px; border-radius: 8px; }
.bar span { display: block; padding: 4px; border-radius: 2px; cursor:pointer; }
</style>
<p><audio id="mPlay" controls="controls" loop="loop"></audio></p>
<div id="bar" class="bar">请选歌：<br /><br /></div>
<script language="javascript">
//数组声明：装载MP3地址
var arUrl = [
["http://www.kumeiwp.com/sub/filestores/2022/02/06/717fb983dc22f7c6b5ec87a01f9ca0ff.mp3","May It Be"],
["http://www.kumeiwp.com/sub/filestores/2022/02/06/e1f8126310fc4e0014a7f5227a86f2fe.mp3","莎莉花园"],
["http://www.kumeiwp.com/sub/filestores/2022/02/03/e8f571d9f2ee61d70934c89452950be1.mp3","好运聚一糖"],
["http://www.kumeiwp.com/sub/filestores/2021/03/11/9ae80e78b6e5e313ddc3582952746d04.mp3","探清水河"]
];
//声明audio操作句柄
var myaud = document.getElementById('mPlay');
/* 将数组url写成链接数据 length是数组元素下标
样式由 CSS 完成，这里只负责写URL数据传递
*/
var str = "";
for(i=0; i<arUrl.length; i++) {
str += "<span onclick=\"myaud.src='" + arUrl + "'; myaud.play();\">" + (i+1) + ". " + arUrl + "</span>";
}
document.getElementById('bar').innerHTML += str;
</script>
arUrl.length就是不管内容，只管个数了吧。这个帖子的命名好像又有与论坛冲突的地方呢，看到回复框有变化呢。{:4_173:} 怪事，回复后没问题，只是快捷回复的地方有变化。 str += "<span onclick=\"myaud.src='" + arUrl + "'; myaud.play();\">" + (i+1) + "</span>";
这一堆里的单引号、双引号都看晕。
比较了一下，+ (i+1) + 就是一维表示的序列号吧，为什么是带小圆圈的序列号？
关于二维的的，+ (i+1) + 同样是序列号，却是自然数字，然后加+ ". " + arUrl，就得到了歌曲名。
为什么这两种表达序列号的方式不一样？ 如果是三列信息，是不是var ar这样表示["张亮", 28,"男"]
然后那一堆里变成加
" + (i+1) + ". " + arUrl + arUrl + "
这里面的双引号太多，不知道对不对{:4_173:} 好像后面那里多了 红影 发表于 2022-2-6 13:56
如果是三列信息，是不是var ar这样表示["张亮", 28,"男"]
然后那一堆里变成加
" + (i+1) + ". " + arUrl[ ...
反正就是讲，子数组每一个又有多个子子数组时，读取方式依然按规律来，比如读取性别：
ar
这是读取张亮的信息，ar 指向张亮所在数据， 指向张亮数组中的第三个数据 红影 发表于 2022-2-6 13:29
怪事，回复后没问题，只是快捷回复的地方有变化。
应该是选择器同名。以后我要改变一下命名规则了 红影 发表于 2022-2-6 13:48
str += "" + (i+1) + "";
这一堆里的单引号、双引号都看晕。
所以很多人不愿意用 innerHTML 这个方法，因为字符串的连缀很难清晰化，更愿意使用 appendChild 追加子元素，容易控制 红影 发表于 2022-2-6 13:56
好像后面那里多了
arUrl 这个写法不对，这一句是三维数组了，你提出的那个构建，还是二维数组：
[
,
]
上面那样，不论子数组有多少数值，数组是二维的
JS不建议操作超过二维的数组 这个帖子怪怪的，可能是昨天对妖怪不敬的结果{:4_170:} 马黑黑 发表于 2022-2-6 14:00
反正就是讲，子数组每一个又有多个子子数组时，读取方式依然按规律来，比如读取性别：
ar
要想读取3个数据改怎么写呢，现在还是读取的2个数据啊。 马黑黑 发表于 2022-2-6 14:00
反正就是讲，子数组每一个又有多个子子数组时，读取方式依然按规律来，比如读取性别：
ar
嗯嗯，知道了{:4_204:} 马黑黑 发表于 2022-2-6 14:01
应该是选择器同名。以后我要改变一下命名规则了
现在好了，看快捷回复那里正常了{:4_173:} 马黑黑 发表于 2022-2-6 14:04
所以很多人不愿意用 innerHTML 这个方法，因为字符串的连缀很难清晰化，更愿意使用 appendChild 追加子元 ...
我每次看到js都有点头晕，应该和这一串字符串有关{:4_173:} 红影 发表于 2022-2-6 14:23
我每次看到js都有点头晕，应该和这一串字符串有关
有些代码语句短，也是令人头疼的 马黑黑 发表于 2022-2-6 20:48
有些代码语句短，也是令人头疼的
短的总归会好点的吧{:4_173:} 红影 发表于 2022-2-6 22:21
短的总归会好点的吧
一般来说简短代码可能好理解，但要看它是什么。比方说：
while (a<=20) {
doit();
a++;
}
这里，a++，表示 a 在循环中每一次加 1。这个，懂了之后就懂。
页:
[1]
2