Skip to content
Snippets Groups Projects
Commit 0b7a4ab0 authored by baoshun yan's avatar baoshun yan
Browse files

can record audio

parent 4db49475
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 675 additions and 29 deletions
.idea/jsLibraryMappings.xml 0 → 100644
+ 6
− 0
View file @ 0b7a4ab0
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="file://$PROJECT_DIR$" libraries="{jquery}" />
</component>
</project>
\ No newline at end of file
.idea/webapp_dovoiceinteraction.iml
+ 13
− 0
View file @ 0b7a4ab0
<?xml version="1.0" encoding="UTF-8"?>
<module type="PYTHON_MODULE" version="4">
<component name="FacetManager">
<facet type="django" name="Django">
<configuration>
<option name="rootFolder" value="$MODULE_DIR$/webApp_DoVoiceInteraction" />
<option name="settingsModule" value="webApp_DoVoiceInteraction/settings.py" />
<option name="manageScript" value="manage.py" />
<option name="environment" value="&lt;map/&gt;" />
<option name="doNotUseTestRunner" value="false" />
<option name="trackFilePattern" value="" />
</configuration>
</facet>
</component>
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/webApp_DoVoiceInteraction" isTestSource="false" />
</content>
<orderEntry type="jdk" jdkName="Pipenv (webapp_dovoiceinteraction) (2)" jdkType="Python SDK" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="jquery" level="application" />
</component>
<component name="TemplatesService">
<option name="TEMPLATE_CONFIGURATION" value="Django" />
......
webApp_DoVoiceInteraction/base/static/audioRecording.js 0 → 100644
+ 469
− 0
View file @ 0b7a4ab0
This diff is collapsed.
webApp_DoVoiceInteraction/base/templates/base/files.html
+ 0
− 2
View file @ 0b7a4ab0
......@@ -3,11 +3,9 @@
{% block content %}
<div>
<!-- <a href="{% url 'upload' %}">Upload file</a><hr>-->
<div>
{% for file in audio_files %}
<div>
{{ file.name }} --- {{ file.created }}
{% if file.file %}
--- {{ file.filename }} --- {{ file.file.size|filesizeformat }}
......
webApp_DoVoiceInteraction/base/templates/base/record.html
+ 177
− 1
View file @ 0b7a4ab0
{% extends 'mainTemplate.html' %}
\ No newline at end of file
{% extends 'mainTemplate.html' %}
{% block content %}
<style type="text/css">
.holder {
background-color: #4c474c;
background-image: -webkit-gradient(linear, left bottom, left top, from(#4c474c), to(#141414));
background-image: -o-linear-gradient(bottom, #4c474c 0%, #141414 100%);
background-image: linear-gradient(0deg, #4c474c 0%, #141414 100%);
border-radius: 50px;
}
[data-role="controls"] > button {
margin: 50px auto;
outline: none;
display: block;
border: none;
background-color: #D9AFD9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#D9AFD9), to(#97D9E1));
background-image: -o-linear-gradient(bottom, #D9AFD9 0%, #97D9E1 100%);
background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
width: 100px;
height: 100px;
border-radius: 50%;
text-indent: -1000em;
cursor: pointer;
-webkit-box-shadow: 0px 5px 5px 2px rgba(0,0,0,0.3) inset,
0px 0px 0px 30px #fff, 0px 0px 0px 35px #333;
box-shadow: 0px 5px 5px 2px rgba(0,0,0,0.3) inset,
0px 0px 0px 30px #fff, 0px 0px 0px 35px #333;
}
[data-role="controls"] > button:hover {
background-color: #ee7bee;
background-image: -webkit-gradient(linear, left bottom, left top, from(#ee7bee), to(#6fe1f5));
background-image: -o-linear-gradient(bottom, #ee7bee 0%, #6fe1f5 100%);
background-image: linear-gradient(0deg, #ee7bee 0%, #6fe1f5 100%);
}
[data-role="controls"] > button[data-recording="true"] {
background-color: #ff2038;
background-image: -webkit-gradient(linear, left bottom, left top, from(#ff2038), to(#b30003));
background-image: -o-linear-gradient(bottom, #ff2038 0%, #b30003 100%);
background-image: linear-gradient(0deg, #ff2038 0%, #b30003 100%);
}
[data-role="recordings"] > .row {
width: auto;
height: auto;
padding: 20px;
}
[data-role="recordings"] > .row > audio {
outline: none;
}
[data-role="recordings"] > .row > a {
display: inline-block;
text-align: center;
font-size: 20px;
line-height: 50px;
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 20px;
color: #fff;
font-weight: bold;
text-decoration: underline;
background-color: #0093E9;
background-image: -webkit-gradient(linear, left bottom, left top, from(#0093E9), to(#80D0C7));
background-image: -o-linear-gradient(bottom, #0093E9 0%, #80D0C7 100%);
background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
float: right;
margin-left: 20px;
cursor: pointer;
}
[data-role="recordings"] > .row > a:hover {
text-decoration: none;
}
[data-role="recordings"] > .row > a:active {
background-image: -webkit-gradient(linear, left top, left bottom, from(#0093E9), to(#80D0C7));
background-image: -o-linear-gradient(top, #0093E9 0%, #80D0C7 100%);
background-image: linear-gradient(180deg, #0093E9 0%, #80D0C7 100%);
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
{% load static %}
<script src="{% static 'audioRecording.js' %}"></script>
<script>
jQuery(document).ready(function () {
var $ = jQuery;
var myRecorder = {
objects: {
context: null,
stream: null,
recorder: null
},
init: function () {
if (null === myRecorder.objects.context) {
myRecorder.objects.context = new (
window.AudioContext || window.webkitAudioContext
);
}
},
start: function () {
var options = {audio: true, video: false};
navigator.mediaDevices.getUserMedia(options).then(function (stream) {
myRecorder.objects.stream = stream;
myRecorder.objects.recorder = new Recorder(
myRecorder.objects.context.createMediaStreamSource(stream),
{numChannels: 1}
);
myRecorder.objects.recorder.record();
}).catch(function (err) {});
},
stop: function (listObject) {
if (null !== myRecorder.objects.stream) {
myRecorder.objects.stream.getAudioTracks()[0].stop();
}
if (null !== myRecorder.objects.recorder) {
myRecorder.objects.recorder.stop();
// Validate object
if (null !== listObject
&& 'object' === typeof listObject
&& listObject.length > 0) {
// Export the WAV file
myRecorder.objects.recorder.exportWAV(function (blob) {
var url = (window.URL || window.webkitURL)
.createObjectURL(blob);
// Prepare the playback
var audioObject = $('<audio controls></audio>')
.attr('src', url);
// Prepare the download link
var downloadObject = $('<a>&#9660;</a>')
.attr('href', url)
.attr('download', new Date().toUTCString() + '.wav');
// Wrap everything in a row
var holderObject = $('<div class="row"></div>')
.append(audioObject)
.append(downloadObject);
// Append to the list
listObject.append(holderObject);
});
}
}
}
};
// Prepare the recordings list
var listObject = $('[data-role="recordings"]');
// Prepare the record button
$('[data-role="controls"] > button').click(function () {
// Initialize the recorder
myRecorder.init();
// Get the button state
var buttonState = !!$(this).attr('data-recording');
// Toggle
if (!buttonState) {
$(this).attr('data-recording', 'true');
myRecorder.start();
} else {
$(this).attr('data-recording', '');
myRecorder.stop(listObject);
}
});
});
</script>
<div class="holder">
<div data-role="controls">
<button>Record</button>
</div>
<div data-role="recordings"></div>
</div>
{% endblock content %}
webApp_DoVoiceInteraction/base/templates/base/upload_file.html
+ 0
− 20
View file @ 0b7a4ab0
......@@ -9,25 +9,5 @@
<input type="submit" value="Upload"/>
</form>
</div>
<!--<div class="ui middle aligned center aligned grid container">-->
<!-- <div class="ui fluid segment">-->
<!-- <input type="file" (change)="fileEvent($event)" class="inputfile" id="embedpollfileinput" />-->
<!-- <label for="embedpollfileinput" class="ui huge red right floated button">-->
<!-- <i class="ui upload icon"></i>-->
<!-- Upload image-->
<!-- </label>-->
<!-- <input type="file" (change)="fileEvent($event)" class="inputfile" id="embedpollfileinput" />-->
<!-- <label for="embedpollfileinput" class="ui huge green right floated button">-->
<!-- <i class="ui upload icon"></i>-->
<!-- Upload image-->
<!-- </label>-->
<!-- </div>-->
<!--</div>-->
{% endblock content %}
webApp_DoVoiceInteraction/base/urls.py
+ 3
− 3
View file @ 0b7a4ab0
......@@ -7,8 +7,8 @@ urlpatterns = [
path('', views.home, name="home"),
path('upload/', views.upload_file, name="upload"),
path('deleteFile/<int:audio_file_id>/', views.delete_file, name="delete"),
path('files/',views.check_files,name = "files"),
path('record/',views.record_audio,name = "record"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
path('files/', views.check_files, name="files"),
path('record/', views.record_audio, name="record"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# static is for development purpose not for production
# https://docs.djangoproject.com/en/2.2/howto/static-files/#serving-files-uploaded-by-a-user-during-development
webApp_DoVoiceInteraction/base/views.py
+ 2
− 2
View file @ 0b7a4ab0
......@@ -33,7 +33,7 @@ def delete_file(request, audio_file_id):
os.remove(os.path.join(settings.MEDIA_ROOT, audio_file_to_delete.file.name))
audio_file_to_delete.delete()
return redirect('home')
return redirect('files')
def check_files(request):
......@@ -43,4 +43,4 @@ def check_files(request):
def record_audio(request):
return render(request, 'base/files.html')
return render(request, 'base/record.html')
webApp_DoVoiceInteraction/webApp_DoVoiceInteraction/settings.py
+ 5
− 1
View file @ 0b7a4ab0
......@@ -115,8 +115,12 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
STATIC_URL = 'static/'
STATIC_URL = '/static/'
# STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment