Skip to content

GitLab

Commit 78c0d989 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout synthèse vocale optionnelle dans player pour Rita

parent 7da757d9
Hide whitespace changes
Inline Side-by-side
clavier/migrations/0010_serie_synthvoc.py 0 → 100644
View file @ 78c0d989
# Generated by Django 3.0.5 on 2021-03-01 21:22
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('clavier', '0009_auto_20210218_1013'),
]
operations = [
migrations.AddField(
model_name='serie',
name='synthvoc',
field=models.CharField(default='0', max_length=1),
),
]
clavier/models.py
View file @ 78c0d989
......@@ -10,6 +10,7 @@ class Serie(models.Model):
auteur = models.ForeignKey(User, on_delete=models.PROTECT)
images = models.CharField(default='0', max_length=1)
phono = models.CharField(default='0', max_length=1)
synthvoc = models.CharField(default='0', max_length=1)
mots = models.TextField(default='[]')
class Mot(models.Model):
......
static/js/clavier.js
View file @ 78c0d989
......@@ -3,7 +3,7 @@
// VARIABLES UTILISATEUR
var fidel = new Object(); // Fidel courant
var currentPhon = null; // Phonème sélectionné
const thisAppli = "phonographe"; // utilisé pour la synthèse vocale
/////////////////////////////////////////////////
//////////// RÉCUPÉRATION DE LA PAGE ////////////
......@@ -582,69 +582,6 @@ function openInNewTab() {
window.open(URL, '_blank');
}
var currentIpa = "";
var currentDebit = 80;
async function playIpa() {
if (thisPageLang == 'fr'){
// Si quelque chose est écrit...
if (document.getElementsByClassName('text').length > 0) {
// on récupère tous les élément classe "text" et on récupère leur classe phon_*
var phonEllist = document.getElementsByClassName('text');
var ipa = "";
for (e=0; e<phonEllist.length; e++){
// on parse les classe c de l'élement e
for (c=0; c<phonEllist[e].classList.length; c++){
// si la classe match "phon_.*"" alors on récupère l'équivalent api
if (phonEllist[e].classList[c].match(/phon_.*/)){
ipa += phon2api[phonEllist[e].classList[c]];
} else if (phonEllist[e].classList[c].match(/pause/)) {
// si la classe match "pause" on insert une espace (qui sera convertie en <break> dans text2speech.py)
ipa += ' ';
}
}
}
ipa = ipa.trim(); // suppression des espaces en début ou en fin
if (ipa != currentIpa){
console.log("lecture de ", ipa);
currentIpa = ipa;
// ON EMBALLE TOUT ÇA
var colis = {
ipa,
'appli': 'phonographe'
};
// Paramètres d'envoi
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(colis)
};
// ENVOI
const response = await fetch('/_playIpa/', options)
const data = await response.json();
readResponse(data["audio"]);
} else {
var audio = document.getElementsByTagName("audio")[0];
audio.playbackRate = document.getElementById('debitParole').value / 100;
audio.play();
}
}
} else window.alert("Cette fonctionnalité n'est pas encore disponible pour l'anglais !");
}
function readResponse(response) {
var source = '<source src="data:audio/mpeg;base64,' + response + '" type="audio/mpeg"></source>';
var audio = '<audio autoplay="true" controls>' + source + '</audio>';
audio.playbackRate = document.getElementById('debitParole').value / 100;
document.getElementById('audio').innerHTML = audio;
}
///////////////////////////////////
......
static/js/playerPhono.js
View file @ 78c0d989
const thisAppli = "phonoplayer";
selectLang("fr");
function selectLang(lang, p="default", f="default"){
console.log('SelectLang()',lang)
......
static/js/syntheseVocale.js 0 → 100644
View file @ 78c0d989
var currentIpa = "";
var currentDebit = 80;
async function playIpa() {
var synth = false
if (thisAppli == "phonographe") {
if (thisPageLang == 'fr'){
// Si quelque chose est écrit...
if (document.getElementsByClassName('text').length > 0) {
// on récupère tous les élément classe "text" et on récupère leur classe phon_*
var phonEllist = document.getElementsByClassName('text');
var ipa = "";
for (e=0; e<phonEllist.length; e++){
// on parse les classe c de l'élement e
for (c=0; c<phonEllist[e].classList.length; c++){
// si la classe match "phon_.*"" alors on récupère l'équivalent api
if (phonEllist[e].classList[c].match(/phon_.*/)){
ipa += phon2api[phonEllist[e].classList[c]];
} else if (phonEllist[e].classList[c].match(/pause/)) {
// si la classe match "pause" on insert une espace (qui sera convertie en <break> dans text2speech.py)
ipa += ' ';
}
}
}
ipa = ipa.trim(); // suppression des espaces en début ou en fin
if (ipa != currentIpa) { synth = true }
}
} else window.alert("Cette fonctionnalité n'est pas encore disponible pour l'anglais !");
} else if (thisAppli == "phonoplayer"){
var rep = document.getElementById('rep')
ipa = ""
for (i=0; i<rep.children.length; i++) {
var repphon = rep.children[i].classList[1].replace("rect","phon")
ipa += phon2api[repphon]
}
if (ipa.length > 0 && ipa != currentIpa) { synth = true }
}
if (synth) {
console.log("lecture de ", ipa);
currentIpa = ipa;
// ON EMBALLE TOUT ÇA
var colis = {
ipa,
'appli': thisAppli
};
// Paramètres d'envoi
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(colis)
};
// ENVOI
const response = await fetch('/_playIpa/', options)
const data = await response.json();
readResponse(data["audio"]);
} else {
var sv_audio = document.getElementsByTagName("audio")[0];
sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
sv_audio.play();
}
}
function readResponse(response) {
var source = '<source src="data:audio/mpeg;base64,' + response + '" type="audio/mpeg"></source>';
var sv_audio = '<audio autoplay="true" controls>' + source + '</audio>';
sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
document.getElementById('audio').innerHTML = sv_audio;
}
\ No newline at end of file
static/styles/player.css
View file @ 78c0d989
......@@ -115,21 +115,24 @@
vertical-align: middle;
}
.divReponseGauche {
width: 20%;
width: 10%;
min-width: 60px;
/* background-color: rebeccapurple; */
padding: 5px 0px;
align-items: center;
}
.divReponseMilieu {
width: 60%;
width: 70%;
text-align: left;
align-items: center;
/* background-color: orangered; */
}
.divReponseDroit {
width: 20%;
min-width: 60px;
min-width: 155px;
/* background-color: orange; */
padding: 10px 0;
align-items: center;
}
#rep {
......@@ -143,6 +146,11 @@
user-select: none;
}
.btn-lecture input {
background-color: transparent;
color: black;
}
.carte {
width: 80px;
height: 56px;
......@@ -163,6 +171,11 @@
.divReponseDroit, .divReponseGauche, .divReponseMilieu {
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
.divReponseMilieu {
min-height: 56px;
}
}
......
templates/base.html
View file @ 78c0d989
......@@ -19,8 +19,9 @@
<link rel="stylesheet" type="text/css" href="{% static 'styles/main.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
{% block styles %}
{% endblock %}
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
......
templates/clavier.html
View file @ 78c0d989
{% extends "base.html" %}
{% load static %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
{% endblock %}
{% block content %}
<script type="text/javascript">
var dicoFidels = JSON.parse("{{fidels|escapejs}}");
......@@ -30,19 +34,17 @@
<div class="d-flex justify-content-between fenetre textSide textZone" id="textZoneBack">
<div id="textZone" contenteditable="false" spellcheck="true"></div>
<div class="my-auto btn-lecture d-flex flex-column align-items-stretch pe-3">
<div onclick="playIpa();" style="cursor: pointer;" title="Prononcer !">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-play-circle nobg" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</div>
<input type="number" value="80" id="debitParole" title="Débit de parole" min="0" max="150" step="10">
<div onclick="playIpa();" style="cursor: pointer;" title="Prononcer !">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-play-circle nobg" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</div>
<input type="number" value="80" id="debitParole" title="Débit de parole" min="0" max="150" step="10">
</div>
</div>
<div id="audio"></div>
<div id="audio" style="display: none;"></div>
<div class="boutons btn-punctuations">
......@@ -193,4 +195,5 @@
<script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script>
<script type="text/javascript" src="{% static 'js/popupAide.js' %}"></script>
<script type="text/javascript" src="{% static 'js/clavier.js' %}"></script>
<script type="text/javascript" src="{% static 'js/syntheseVocale.js' %}"></script>
{% endblock %}
\ No newline at end of file
templates/playerHome.html
View file @ 78c0d989
{% extends "base.html" %}
{% load static %}
{% block content %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
{% endblock %}
{% block content %}
<div class="mainContent">
<div class="homeMainContent">
......
templates/playerPhono.html
View file @ 78c0d989
{% extends "base.html" %}
{% load static %}
{% block content %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/player.css'%}">
{% endblock %}
{% block content %}
<!-- RÉCUPÉRATION DE LA SÉRIE À CHARGER -->
<script type="text/javascript">
var serieId = JSON.parse("{{ serieContent.id | escapejs }}");
......@@ -42,7 +47,7 @@
</div>
<div class="divReponse" id="divReponse" style="display: none;">
<div class="divReponseGauche">
<div class="divReponseGauche d-flex align-items-center">
<button onclick="playAudio()" id="btnAudio" type="button" class="btn btn-outline-primary btn-lg btnAudio">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" style="background-color:transparent" class="bi bi-volume-up-fill" viewBox="0 0 16 16">
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
......@@ -51,18 +56,33 @@
</svg>
</button>
</div>
<div class="divReponseMilieu">
<div id="rep"></div>
<div class="divReponseMilieu d-flex align-items-center">
<div id="rep" class="d-flex align-items-center flex-wrap"></div>
</div>
<div class="divReponseDroit">
<div class="divReponseDroit d-flex">
{% if serieContent.synthvoc == "1" %}
<div class="my-auto btn-lecture d-flex flex-column align-items-stretch pe-3">
<div onclick="playIpa();" style="cursor: pointer;" title="Prononcer !">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-play-circle nobg" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</div>
<input type="number" value="80" id="debitParole" title="Débit de parole" min="0" max="150" step="10">
</div>
{% endif %}
<button type="button" class="btn btn-success btn-lg" onclick="checkAnswer()" id="btnValider">Valider</button>
</div>
</div>
</div>
<div id="audio" style="display: none;">
<audio autoplay="true" controls></audio>
</div>
<center>
<div id="bravo" style="display: none;">
<img id="bravo_img" src="" style="height:50vh;">
<img id="bravo_img" src="" style="height:30vh;">
<div id="bravo_text"></div>
<button id="bravo_next" onclick="loadNext()" type="button" class="btn btn-success btn-lg">Continuer</button>
<a href="/player/"><button id="bravo_quit" style="display:none" type="button" class="btn btn-primary btn-lg">Quitter</button></a>
......@@ -120,6 +140,7 @@
{% block javascript %}
<script type="text/javascript" src="{% static 'js/id2class.js' %}"></script>
<script type="text/javascript" src="{% static 'js/phon2api.js' %}"></script>
<script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
<script type="text/javascript" src="{% static 'js/interface.js' %}"></script>
<script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script>
......@@ -127,4 +148,5 @@
<script type="text/javascript" src="{% static 'js/playerPhono.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dragdrop.js' %}"></script>
<script type="text/javascript" src="{% static 'js/DragDropTouch.js' %}"></script>
<script type="text/javascript" src="{% static 'js/syntheseVocale.js' %}"></script>
{% endblock javascript %}
\ No newline at end of file
Supports Markdown
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