能否在Sanity.io上传MP3文件？播客应用开发技术问询

Sanity原生支持MP3文件上传，无需依赖额外插件，以下是具体实现步骤：

1. 在Schema中定义音频字段 #

首先在你的Sanity Schema里创建用于存储播客剧集的文档类型，其中包含专门的音频文件字段，可限制仅允许MP3格式上传：

// schemas/podcastEpisode.js
export default {
  name: 'podcastEpisode',
  type: 'document',
  title: '播客剧集',
  fields: [
    {
      name: 'title',
      type: 'string',
      title: '剧集标题'
    },
    {
      name: 'audioFile',
      type: 'file',
      title: '音频文件',
      options: {
        accept: 'audio/mp3', // 仅允许MP3格式上传
        storeOriginalFilename: true // 保留上传时的原始文件名
      }
    },
    {
      name: 'description',
      type: 'text',
      title: '剧集描述'
    },
    {
      name: 'publishDate',
      type: 'datetime',
      title: '发布日期'
    }
  ]
}

将这个Schema文件添加到Sanity Studio的配置中，就能在后台看到对应的播客剧集编辑界面。

2. 在Sanity Studio上传MP3文件 #

启动Sanity Studio后，进入播客剧集的创建页面，找到“音频文件”字段，点击上传按钮选择本地的MP3文件即可完成上传。Sanity会自动将文件存储到其CDN，并生成对应的资产记录。

3. 前端获取并播放音频 #

通过Sanity客户端查询数据时，获取音频文件的CDN地址，然后用HTML5的<audio>标签实现播放功能：

// 前端示例（React环境）
import { createClient } from '@sanity/client'

// 初始化Sanity客户端
const sanityClient = createClient({
  projectId: '你的项目ID',
  dataset: 'production',
  useCdn: true
})

// 查询单条播客剧集数据
const getPodcastEpisode = async (episodeId) => {
  const data = await sanityClient.fetch(`
    *[_id == $episodeId][0]{
      title,
      description,
      publishDate,
      audioFile{
        asset->{
          url
        }
      }
    }
  `, { episodeId })

  return data
}

// 播放组件示例
function PodcastPlayer({ episode }) {
  if (!episode) return null

  return (
    <div className="podcast-player">
      <h3>{episode.title}</h3>
      <p>{new Date(episode.publishDate).toLocaleDateString()}</p>
      <p>{episode.description}</p>
      <audio controls src={episode.audioFile.asset.url}>
        你的浏览器不支持HTML5音频播放，请升级浏览器后重试。
      </audio>
    </div>
  )
}

可选进阶处理 #

如果需要对音频进行转码、提取元数据（如时长、比特率）等操作，可以通过Sanity的Webhook触发外部服务（如FFmpeg）处理，处理完成后再将结果更新回Sanity文档，但基础的上传播放需求无需额外操作。

内容的提问来源于stack exchange，提问作者Rajender Katkuri