0、前引:
在Audio中mp3可以播放mp4不可以使用，其它的没尝试过。
(废话可以不看，写这篇文章是因为想要给个人博客添加音乐，但在CSDN中找不到，我只看了3-4个浏览量很高的文章，1千多的浏览量，只给代码，没讲怎么操作，对萌新不好，所以才写的这篇文章),这篇文章是写怎么在Vue3中建立audio对象并使用一些常见的方法、属性来达到在页面播放音乐的效果，这个效果我目前还没有完善，所以这篇文章我会在继续更新。
使用new Audio来创建一个audio的实例对象，将他们存储在一个数组中方便之后使用数组的方法来简化代码。
注：这里数组中的每一个都使用new Audio来创建，可以减少播放延迟(我感觉可以使用map来到达这种效果但我还没有去实践),new Audio()，要在括号里面传url。
这是模板：
这是路径：里面的musics.js没有用不用管，我练手的，因为是萌新所以路径比较乱。
js代码(这是旧代码，有问题，可以看循环播放1，改正了)。
详细的函数，其中previousOne和nextMusic差不多。
效果图
1、代码方面：
1：循环播放
currentAudio.value.loop = true,这行代码可以使当前的音乐循环播放（最开始没有发现这个问题：这个对使当前代码出现只播放第一首不能自动播放下一首的问题），将它去掉，在播放音乐时赋值为false就能使第一首音乐在播放结束后也能自动播放下一首歌了。
在这里写currentAudio.value = songs[index]是因为我改初始化了，将currentAudio.value = ref(new Audio)然后在这里重新赋值会原来的歌曲。
2：播放
function playMusic()函数里面使用currentAudio.value.play()可以播放你所设置的音乐，这里我将currentAudio.value的值设置成songs数组中的第一首歌，你可以自己改，到达开始就放第2，3，4······n首歌的效果。
3：暂停
function pauseMusic()函数里面使用currentAudio.value.pause()来实现暂停播放的效果。
4：下一首
function nextMusic()
所以通过currentAudio.value.currentTime = 0来控制从歌的开头播放（在我代码中的作用主要是在播放完当前歌曲，自动播放下一首歌曲时，让上一首歌曲先使用 pause() 来暂停，后重置为0，组合起来防止重复播放）。
currentAudio.value.addEventListener('ended', nextMusic)这个其它就是使用原生的Web API来实现自动播放下一首歌的作用(我是按照顺序来播放的)，但你要注意的是，在你播放一首歌的时候你要添加 ended 的事件监听，在这首歌播完时去掉这个事件监听 或者 自动播放下一首歌或者点击上一首或者下一首按钮时去掉这个事件监听。
(这个原生Web API需要手动添加很麻烦，你可以使用watch来做到自动添加，但我还没有去尝试)。
5：上一首
和下一首在结构上差不多类似不做过多叙述。
6：整合4和5中的重复代码
4与5中的代码有很多是复用的，我们可以整合下来让代码更加简洁明了。
这是整合服用的代码，将它们整合成2个函数，第一个函数的功能就是暂停当前播放的音乐，第二个函数是播放音乐，那么你需要单独写的就是选中的音乐（比如说你点击上一首音乐的按钮，你只需写上一首歌曲这个逻辑就可以了，其他同理）。
这是上一首音乐的修改后的写法。
这是下一首音乐的修改后的写法。
7：音乐列表
这个音乐列表其实就是新建一个盒子，专门去放你的列表音乐就行，但特许在这个盒子要能随时创建与随时删除，因此在这里我们可以选择 v-if 当然你也可以使用 v-show 来实现这个功能 ，（看你的音乐列表的量了，我写的时候忘了还有 v-show 这个东西，写完了不想改就这样了）。
在这里lz为了方便就使用了3元表达式来实现改变isfalse的值，这样可以减少代码量的同时，能够准确的确保该列表的创建与删除。
这样基础的问题就解决了，剩下的就是点击你选择的音乐，然后播放该音乐了，和前面上一首和下一首的逻辑一样，因为我们将重复使用的代码整合成了函数，所以在这里可以这样写
注意：我的这个函数接收的值，我直接将用music.id传过去了，这里的 i:any 是ts的代码，意思是这个 i 可能是任意数据（没办法，我用的语言是 ts 不这样写它就报错，虽然不管这个报错也没问题），我又使用了 as any 去断言了（就是告诉他我这个数据是任意的数据）。
注：这里的任意数据指的是数据类型（如：字符串，数字，对象，数组等）
8：单曲循环
目前这个功能确实能正常运行，但有一点问题需要我后续去解决，但目前测试正常（我用这个代码听了一首个3遍，很正常，所以我感觉应该没问题）。
这个代码其实就是在之前的代码基础上修改的，之前的功能都是 firstStep() + 歌曲播放的设置 + secondStep()，而这个代码就是将 firstStep() 和 secondStep() 代码中不对的地方删除掉，但目前这个代码很明显有冗余部分，但该部分删除会无法实现单曲循环的功能，待后续解决。
2、歌曲路径上：
(1)简单方法：
你可以在音乐App中直接下载音乐，在音乐软件的设置中查看你下载音乐存储在哪一个文件中，之后就是转移这个mp3文件了到你的Vue3文件。
注：如果格式不是mp3的话你可以Convertio在先转换文件的格式(免费的，但缺点很明显，时间长，3分多钟的音乐转换到下载要5-8分钟，我没有多使用这种转换和相应的app所以不清楚这时间是不是太长了)
(2)麻烦方法:
（这是最恶心的，lz之前没有意识到可以在音乐App中下载歌曲的默认格式就是mp3时使用的方法）
你可以下载OBS(找deepseek问会给你官网地址的)，在音乐软件放歌时，使用这个OBS软件录制最后在Convertio中转一下格式就行。