如何在Django Admin面板为音频FileField添加内置音频播放器

实现逻辑和你之前做ImageField图片预览完全一致，只需要替换成HTML原生<audio>标签即可，分两步配置：

1. 修改模型类添加预览属性 #

如果之前做图片预览已经导入过mark_safe，不需要重复导入，直接在Word模型中添加音频预览的属性方法：

from django.utils.html import mark_safe

class Word(models.Model):
    theme = models.ManyToManyField(Theme, related_name='words')
    name = models.CharField(max_length=200, null=True, blank=True)
    sound = models.FileField(upload_to='sounds/', blank=True)
    # 原有icon字段及icon_preview属性保留不变

    @property
    def sound_preview(self):
        if self.sound:
            # 原生audio标签加controls属性显示播放控件，preload="none"禁止预加载减少带宽占用
            return mark_safe(f'<audio controls preload="none" src="{self.sound.url}" style="max-width: 320px;"></audio>')
        return "无音频文件"

2. 修改Admin配置 #

在对应的ModelAdmin类中，把sound_preview加入列表展示和只读字段配置，和之前icon预览的配置写法完全一致：

@admin.register(Word)
class WordAdmin(admin.ModelAdmin):
    # 如果不需要在列表页显示播放器，把sound_preview从list_display中移除即可
    list_display = ('id', 'name', 'icon', 'icon_preview', 'sound_preview')
    readonly_fields = ('icon_preview', 'sound_preview')

    # 原有icon_preview方法保留不变
    def icon_preview(self, item):
        return item.icon_preview
    icon_preview.short_description = '图标预览'
    icon_preview.allow_tags = True

    # 新增音频预览的admin方法
    def sound_preview(self, item):
        return item.sound_preview
    sound_preview.short_description = '音频播放'
    sound_preview.allow_tags = True

配置说明 #

• 常规MP3格式音频所有现代浏览器都原生支持，不需要额外引入第三方播放器
• 给audio标签加内联样式是为了限制播放器最大宽度，避免在admin页面布局溢出
• 设置preload="none"是为了避免打开列表页时自动加载所有音频文件，拖慢页面加载速度，只有用户点击播放时才会加载对应音频资源

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