数组实现audio音乐切换

马黑黑 · 发表于 2022-2-6 11:33

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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[i] + "'; myaud.play();">" + (i+1) + "</span>";
}
document.getElementById('mbar').innerHTML += str;
</script>

复制代码

马黑黑 · 发表于 2022-2-6 11:50

本帖最后由马黑黑于 2022-2-6 11:52 编辑

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

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

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

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

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

马黑黑 · 发表于 2022-2-6 12:30

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

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

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

ar[2][1]

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

二楼演示的选歌示例，没有提供歌曲相关消息，只知道歌的序号，这是因为所用到的是一维数组，若改用二维数组，把歌名也带入对应的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[i][0] + "'; myaud.play();">" + (i+1) + ". " + arUrl[i][1] + "</span>";
}
document.getElementById('bar').innerHTML += str;
</script>

复制代码

红影 · 发表于 2022-2-6 13:28

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

红影 · 发表于 2022-2-6 13:29

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

红影 · 发表于 2022-2-6 13:48

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

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

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

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

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

红影 · 发表于 2022-2-6 13:56

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

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

红影 · 发表于 2022-2-6 13:56

好像后面那里多了[1]

马黑黑 · 发表于 2022-2-6 14:00

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

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

ar[0][2]

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

马黑黑 · 发表于 2022-2-6 14:01

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

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

马黑黑 · 发表于 2022-2-6 14:04

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

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

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

马黑黑 · 发表于 2022-2-6 14:10

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

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

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

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

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

马黑黑 · 发表于 2022-2-6 14:11

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

红影 · 发表于 2022-2-6 14:20

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

ar[0][2]

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

红影 · 发表于 2022-2-6 14:22

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

ar[0][2]

嗯嗯，知道了

红影 · 发表于 2022-2-6 14:22

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

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

红影 · 发表于 2022-2-6 14:23

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

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

马黑黑 · 发表于 2022-2-6 20:48

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

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

红影 · 发表于 2022-2-6 22:21

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

短的总归会好点的吧

马黑黑 · 发表于 2022-2-6 22:28

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

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

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

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

数组实现audio音乐切换

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

一往情深

心香一瓣

金剪刀

妙笔生花

天长地久

绚丽缤纷

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节