seb*_*6m6 6 django django-models
嘿，我想在我的一个模型中将音频录制为语音注释：
\n\nclass ShipPhoto(models.Model):\n user_name = models.ForeignKey(User, on_delete=models.CASCADE)\n photo = models.ImageField()\n voice_record = ??????\n carplates = models.CharField(max_length=20)\n这样，当我打开 form_template 时，我可以单击语音记录并将录制的消息上传到我的模型。我已经检查了此链接https://github.com/voxy/django-audio-recorder但当我使用 pip 命令安装它时，它会自动卸载我当前版本的 django (2.0.8) 并降级到 1.8 ...还有其他解决方案吗？我该怎么办？
\n\n=================================================== ==================\n更新 (10/10)
\n\n仍然不确定如何将 videojs 合并到我的 Django 表单中。下面你可以看到我的 ModelForm、views.py 和模板。
\n\n模型表单
\n\nclass ShipPhotoForm(ModelForm):\n class Meta:\n model = ShipPhoto\n exclude= (\'user_name\',)\n\n def save_model(self, request, obj, form, change):\n if not obj.pk:\n obj.user_name = request.user\n obj.save()\n视图.py
\n\nclass ShipPhotoCreate(LoginRequiredMixin, View):\n\n login_url = \'/accounts/login/\'\n redirect_field_name = \'redirect_to\'\n\n form_class = ShipPhotoForm\n template_name = \'photo/shipphoto_form.html\'\n\n def create_object(self, audio_file):\n return self.model.objects.create(**{self.create_field: audio_file})\n\n def get(self, request):\n form =self.form_class(None)\n return render(request, self.template_name, {\'form\':form})\n\n def post(self,request):\n form = self.form_class(request.POST, request.FILES)\n print(form.errors)\n if form.is_valid(): # uploader has been excluded. No more error.\n photo = form.save(commit=False) # returns unsaved instance\n photo.user_name = request.user\n photo.save() # real save to DB.\n return redirect(\'photo:main\')\n return render(request,self.template_name,{})\n模板
\n\n{% extends "main/base.html" %}\n{% block content %}\n<br>\n<div class="row">\n <div class="col-sm-12 col-md-6">\n <div class="panel panel-default">\n <div class="panel-body">\n <form class="form-horizontal" action="" method="post" enctype="multipart/form-data">\n {% csrf_token %}\n {% include "form_template.html" %}\n <div class="form-group">\n <div class="col-sm-offset-2 col-sm-10">\n <button type="submit" class="btn btn-success">Submit/\xe4\xb8\x8a\xe4\xbc\xa0</button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\n{% endblock %}\n“form_template.html”
\n\n{% for field in form %}\n <div class="form-group">\n <div class="col-sm-offset-2 col-sm-10">\n <span class="text-danger small">{{ field.errors }} </span>\n </div>\n <label class="control-label col-sm-2">{{ field.label_tag }}</label>\n <div class="col-sm-10">{{ field }}</div>\n </div>\n\n{% endfor %}\n我可以覆盖{{field}}forshiphoto.voice_record以便它与 .js 插件或类似的东西一起使用吗？我不太确定如何将 .js 脚本添加到我的模板中，以便在打开 ShipPhotoCreate(View) 并单击该字段时，voice_record它会提示我的手机打开语音记录，然后将其保存在数据库中。
在模型中
voice_record = models.FileField()
使用一些js插件在客户端录制音频。我个人使用videojs，因为它可以处理音频和视频。然后将录制的音频文件发送到服务器并保存。我个人使用ajax，你可以使用任何方法。
在视图中：
audio_file = request.FILES.get('audio')
shipphoto_obj = ShipPhoto.objects.get(pk='whatever')
shipphoto_obj.voice_record = audio_file
shipphoto_obj.save()
完整代码：
模板
<link rel="stylesheet" href="{% static 'myapp/videojs-record/dist/css/video-js.min.css' %}" />
<link rel="stylesheet" href="{% static 'myapp/videojs-record/dist/css/videojs.record.min.css' %}" />
<style>
/* change player background color */
#myAudio {
background-color: #9FD6BA;
}
</style>
<body>
<audio id="myAudio" class="video-js vjs-default-skin"></audio>
<button class="audio-btn strt disable-btn" id="submit" disabled>Submit</button>
<span class="upload-comp">Uploading Complete</span>
<!-- Requires a lot of external js, I think I have added them all. -->
<script src="{% static 'myApp/videojs-record/video.min.js' %}"></script>
<script src="{% static 'myApp/videojs-record/RecordRTC.min.js' %}"></script>
<script src="{% static 'myApp/videojs-record/adapter.js' %}"></script>
<script src="{% static 'myApp/wavesurfer/dist/wavesurfer.min.js' %}"></script>
<script src="{% static 'myApp/wavesurfer/dist/plugin/wavesurfer.microphone.min.js' %}"></script>
<script src="{% static 'myApp/videojs-wavesurfer/dist/videojs.wavesurfer.min.js' %}"></script>
<script src="{% static 'myApp/videojs-record/dist/videojs.record.min.js' %}"></script>
<script>
// Handle audio record and upload
$(document).ready(function(){
var player = videojs("myAudio", {
controls: true,
width: 600,
height: 300,
fluid: false,
plugins: {
wavesurfer: {
src: "live",
waveColor: "#36393b",
progressColor: "black",
debug: true,
cursorWidth: 1,
msDisplayMax: 20,
hideScrollbar: true
},
record: {
audio: true,
video: false,
maxLength: 60,
debug: true
}
}
}, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
' + videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
' and recordrtc ' + RecordRTC.version;
videojs.log(msg);
});
// error handling
player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});
player.on('error', function(error) {
console.log('error:', error);
});
// user clicked the record button and started recording
player.on('startRecord', function() {
console.log('started recording!');
});
// user completed recording and stream is available
player.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording: ', player.recordedData);
$('#submit').prop('disabled', false);
$('#submit').removeClass('disable-btn');
});
$('#submit').on('click', function(){
var btn = $(this);
btn.html('Saving...').prop('disabled', true).addClass('disable-btn');
var myFile = new File([player.recordedData], 'audio.webm');
var csrf = $('input[name="csrfmiddlewaretoken"]').val();
var url = "{% url 'myapp:myurl' %}";
var data = new FormData();
data.append('recorded_audio', myFile);
data.append('csrfmiddlewaretoken', csrf);
$.ajax({
url: url,
method: 'post',
data: data,
success: function(data){
if(data.success){
btn.html('Re Submit');
$('.upload-comp').show();
}
else{
btn.html('Error').prop('disabled', false).removeClass('disable-btn');
}
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</body>
浏览次数：
class AjaxSaveAudio(View):
"""Use ajax to save audio sent by user."""
def post(self, request):
"""Save recorded audio blob sent by user."""
audio_file = request.FILES.get('recorded_audio')
myObj = MyModel() # Put aurguments to properly according to your model
myObj.voice_record = audio_file
myObj.save()
return JsonResponse({
'success': True,
})
| 归档时间： |
|
| 查看次数： |
8253 次 |
| 最近记录： |