在浏览器中播放验证码音频而不是在下载的.wav文件中播放验证码音频

Question

默认情况下，当用户单击验证码图像时，django-simple-captcha使用flite linux命令行程序将验证码文本转换为可下载的.wav文件。与下载.wav文件相比，更好的用户体验是通过单击播放按钮直接在浏览器中播放音频。

如何更改django-simple-captcha的默认行为才能做到这一点？有没有一种方法可以让它在许多不同的表单上通用工作，比如模板表单，所有身份验证表单等？

Answer 1

你想使用HTML5的标签。删除用于引用的链接：https://www.w3schools.com/tags/tag_audio.asp。这是我所做的：

forms.py

from captcha.fields import CaptchaField, CaptchaTextInput
from django import forms
from django.contrib.auth import get_user_model
from django.forms import ModelForm

User = get_user_model()

class CustomCaptchaTextInput(CaptchaTextInput):
    template_name = "register/custom.captcha.html"

class RegisterForm(ModelForm):
    captcha = CaptchaField(
        label = "Captcha",
        label_suffix = "",
        widget = CustomCaptchaTextInput(
            attrs = {"class": "form-field"}
        )
    )
    username = forms.CharField(
        label = "Username",
        label_suffix = "",
        required = True,
        help_text = "",
        widget = forms.TextInput(
            attrs = {"class": "form-field"}
        )
    )
    
    email = forms.CharField(
        label = "Email",
        label_suffix = "",
        max_length = 100,
        required = True,
        help_text = "",
        widget = forms.TextInput(
            attrs = {"class": "form-field"}
        )
    )
    
    password = forms.CharField(
        label = "Password",
        label_suffix = "",
        required = True,
        help_text = "",
        widget = forms.PasswordInput(
            attrs = {"class": "form-field"}
        )
    )
    class Meta:
        model = User
        fields = ["username", "email", "password"]

在我的forms.py文件中，我创建了一个从CaptchaTextInput继承的自定义类，并用我自己的自定义模板文件覆盖了template_name变量。接下来，我将RegisterForm的captcha字段中的小部件设置为指向这个自定义类。请注意，如果您没有使用template_name的命名方案app/template_name_NAME.html或register/custom.captcha.html，您将得到一个template not found错误。为了更清楚起见，我的自定义文件是register/templates/register/custom.captcha.html格式的

custom.captcha.html

{% load i18n %}
{% spaceless %}
    {% if audio %}
        <audio id="captcha-audio"src="{{ audio }}" type="audio/wav"></audio>
        <a title="{% trans "Play CAPTCHA as audio file" %}">
    {% endif %}
        <img src="{{ image }}" alt="captcha" class="captcha" onclick="document.getElementById('captcha-audio').play()" />
    {% if audio %}
        </a>
    {% endif %}
{% endspaceless %}
{% include "django/forms/widgets/multiwidget.html" %}   

作为参考，这是这个文件的原始Django-Simple-Captcha代码：https://github.com/mbi/django-simple-captcha/blob/master/captcha/templates/captcha/widgets/captcha.html。在我的自定义captcha.html文件中，我复制了原始文件中的内容，并做了一些修改。我在标签中添加了ID名称，以便稍后我可以单击验证码图像并通过onclick播放声音。我还将模板标记{{ html5 }}移动到音频标记。