泡泡: Coze应用技巧！轻松打造专属背景音乐，让你的应用与众不同！
泡泡: Coze应用技巧！轻松打造专属背景音乐，让你的应用与众不同！
泡泡: Coze应用技巧！轻松打造专属背景音乐，让你的应用与众不同！ 泡泡: Coze应用技巧！轻松打造专属背景音乐，让你的应用与众不同！ Modified December 5, 2024 一、背景 • 最近coze又放出很多新功能，其中coze应用绝对让人眼前一亮。如此惊艳的改变怎么能不让人想要动手操作呢。 • 在之前做智能体的过程中就一直在思考是否可以让智能体有背景音乐，这样在使用的时候会多一份趣味性。但尝试无果，这次coze应用的出现，让我的想法再一次出现，于是通过各种尝试终于发现一种可行的方法。 二、操作步骤 1、创建一个coze，这步应该没有人不会吧（省略） 2、在“用户界面”拖入一个markdown组件 3、在markdown中写入html(这步是重点) 要写入什么内容呢？对于了解前端页面的同学来说可能不难理解，用html写一个音乐播放器. 不懂前端、不会写前端代码怎么办？问AI。。。我习惯使用智谱清言，大家可以选择自己习惯的AI工具。 我生成的源码，可以拿来直接使用 Code block Bash Copy <!DOCTYPE html <html lang="en" <head <meta charset="UTF 8" <meta name="viewport" content="width=device width, initial scale=1.0" <title 本地音乐播放器</title <style body { font family: Arial, sans serif; display: flex; justify content: center; align items: center; height: 100vh; margin: 0; } player { text align: center; } audio { width: 300px; } </style </head <body <div id="player" <h1 本地音乐播放器</h1 <audio id="audioPlayer" controls <source src="song.mp3" type="audio/mpeg" 您的浏览器不支持音频元素。 </audio </div <script // 可以在这里添加更多的JavaScript代码来控制播放器 </script </body </html 4、调整代码获取在线音乐 将markdown自带的内容全部删除，将上面的代码写入进markdown组件的内容中，你会发现神奇的事情出现了。在“用户界面”出现了一个音乐播放器。 此时的播放器还无法正常播放音乐，因为代码中没有写入可以播放的音频。这就需要我们找一个在线音乐播放平台，获取到歌曲的url，再将url复制进上面的代码。 网上很多在线音乐的网站，随便找一个，打开浏览器的控制台（按F12）找到network（网络），这部分对于非开发人员来说有一点点难/(ㄒoㄒ)/ 选择播放的请求，将带有.mp3格式的url复制出来。如下图 找到上面代码中的<source src="song.mp3" type="audio/mpeg" 部分，将song.mp3换成你复制的音乐地址。刷新下咱们的开发页面。之后会看到播放器可以使用了。 4、设置音乐自动播放 如果上面的操作全部成功后，那么你会发现播放音乐需要手工点击播放按钮，如何设置让它自动播放呢？ 仍然是调整上面markdown中的代码，找到<audio id="audioPlayer" controls ，再 前面加一个单词autoplay Code block Bash Copy 加完后的样子 <audio id="audioPlayer" controls autoplay 这是我们刷新网页，再次进入到“用户界面”的时候就会听到歌曲了，而不再需要你手工点击。 Tips 1、本地音乐播放器这几个字太大了，不美观？ 在markdown代码中直接删除它就好了 2、如何让播放器隐藏起来？ 添加一张图片把它覆盖上，图片的位置选择“绝对定位”，把图片拖到播放器上方即可。每个组件最下面都会有一个隐藏选项，这个选项的用途不是哦！ 一、背景 • 最近coze又放出很多新功能，其中coze应用绝对让人眼前一亮。如此惊艳的改变怎么能不让人想要动手操作呢。 • 在之前做智能体的过程中就一直在思考是否可以让智能体有背景音乐，这样在使用的时候会多一份趣味性。但尝试无果，这次coze应用的出现，让我的想法再一次出现，于是通过各种尝试终于发现一种可行的方法。 二、操作步骤 1、创建一个coze，这步应该没有人不会吧（省略） 2、在“用户界面”拖入一个markdown组件 3、在markdown中写入html(这步是重点) 要写入什么内容呢？对于了解前端页面的同学来说可能不难理解，用html写一个音乐播放器. 不懂前端、不会写前端代码怎么办？问AI。。。我习惯使用智谱清言，大家可以选择自己习惯的AI工具。 我生成的源码，可以拿来直接使用 4、调整代码获取在线音乐 将markdown自带的内容全部删除，将上面的代码写入进markdown组件的内容中，你会发现神奇的事情出现了。在“用户界面”出现了一个音乐播放器。 此时的播放器还无法正常播放音乐，因为代码中没有写入可以播放的音频。这就需要我们找一个在线音乐播放平台，获取到歌曲的url，再将url复制进上面的代码。 网上很多在线音乐的网站，随便找一个，打开浏览器的控制台（按F12）找到network（网络），这部分对于非开发人员来说有一点点难/(ㄒoㄒ)/ 选择播放的请求，将带有.mp3格式的url复制出来。如下图 找到上面代码中的<source src="song.mp3" type="audio/mpeg" 部分，将song.mp3换成你复制的音乐地址。刷新下咱们的开发页面。之后会看到播放器可以使用了。 4、设置音乐自动播放 如果上面的操作全部成功后，那么你会发现播放音乐需要手工点击播放按钮，如何设置让它自动播放呢？ 仍然是调整上面markdown中的代码，找到<audio id="audioPlayer" controls ，再 前面加一个单词autoplay 这是我们刷新网页，再次进入到“用户界面”的时候就会听到歌曲了，而不再需要你手工点击。 Tips 1、本地音乐播放器这几个字太大了，不美观？ 在markdown代码中直接删除它就好了 2、如何让播放器隐藏起来？ 添加一张图片把它覆盖上，图片的位置选择“绝对定位”，把图片拖到播放器上方即可。每个组件最下面都会有一个隐藏选项，这个选项的用途不是哦！