输入“/”快速插入内容

泡泡: Coze应用技巧!轻松打造专属背景音乐,让你的应用与众不同!

2024年12月5日修改
一、背景
最近coze又放出很多新功能,其中coze应用绝对让人眼前一亮。如此惊艳的改变怎么能不让人想要动手操作呢。
在之前做智能体的过程中就一直在思考是否可以让智能体有背景音乐,这样在使用的时候会多一份趣味性。但尝试无果,这次coze应用的出现,让我的想法再一次出现,于是通过各种尝试终于发现一种可行的方法。
二、操作步骤
1、创建一个coze,这步应该没有人不会吧(省略)
2、在“用户界面”拖入一个markdown组件
3、在markdown中写入html(这步是重点)
要写入什么内容呢?对于了解前端页面的同学来说可能不难理解,用html写一个音乐播放器.
不懂前端、不会写前端代码怎么办?问AI。。。我习惯使用智谱清言,大家可以选择自己习惯的AI工具。
我生成的源码,可以拿来直接使用
代码块
<!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>