Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Pédagogies Multimodales
Phonographe
Commits
b179f9e6
Commit
b179f9e6
authored
Mar 26, 2021
by
Sylvain Coulange
Browse files
déploiement du player bac-a-sable
parent
a2480828
Changes
4
Hide whitespace changes
Inline
Side-by-side
static/js/playerPhono.js
View file @
b179f9e6
...
...
@@ -86,11 +86,22 @@ function selectPanneau(p){
/// ACTIONS LORS DU CLIC SUR PHONEME
var
cartes
=
[]
// initialisation de la liste des cartes disponible (0 au début)
var
ligneCible
=
"
rep
"
changeLigne
(
document
.
getElementById
(
ligneCible
).
parentElement
)
// par défaut ligne active = rep
function
changeLigne
(
el
)
{
let
newRep
=
el
.
firstElementChild
console
.
log
(
'
Change ligne to
'
+
newRep
.
id
)
ligneCible
=
newRep
.
id
document
.
querySelectorAll
(
'
.ligneCible
'
).
forEach
((
divRep
)
=>
{
divRep
.
classList
.
remove
(
'
ligneCible
'
)})
el
.
classList
.
add
(
'
ligneCible
'
)
saveTrace
(
`passage ligne
${
ligneCible
}
`
)
}
function
recupPhon
(
identifiant
)
{
var
rectId
=
identifiant
var
phonId
=
rectId
.
replace
(
"
rect
"
,
"
phon
"
)
var
repDiv
=
document
.
getElementById
(
'
rep
'
)
var
repDiv
=
document
.
getElementById
(
ligneCible
)
var
newCarte
=
document
.
createElement
(
'
div
'
)
newCarte
.
classList
=
"
carte
"
+
rectId
;
// on garde rectId, pour connaître le phonème mais sans appeler les styles de phonochromie-alem.css
...
...
@@ -341,3 +352,44 @@ svgClick.addEventListener("load",function(){
},
false
);
// RESTRICTIONS EXPÉ ALEXANDRE -- temporaire
if
(
thisURL
.
match
(
/.*pA
\/
play/
)
||
thisURL
.
match
(
/.*pAV
\/
play/
)
||
thisURL
.
match
(
/.*serie-bac-a-sable
\/
play/
))
{
console
.
log
(
'
Session pour expé Alexandre: restrictions.
'
)
document
.
getElementById
(
'
retourHome
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
bravo_quit
'
).
style
.
display
=
"
none
"
}
// RESTRICTIONS BAC À SABLE -- pas de série de mots
if
(
thisURL
.
match
(
/.*serie-bac-a-sable
\/
play/
))
{
console
.
log
(
'
Session Bac À Sable
'
)
document
.
getElementById
(
'
fenetreDeLancement
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
divReponse
'
).
style
.
display
=
""
// Suppression divReponseGauche
document
.
getElementsByClassName
(
'
divReponseGauche
'
)[
0
].
remove
()
// Reformattage divReponseMilieu
document
.
getElementsByClassName
(
'
divReponseMilieu
'
)[
0
].
classList
.
add
(
'
bacAsable
'
)
// Mise à jour des boutons
document
.
getElementById
(
'
btnEnter
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
btnValider
'
).
style
.
display
=
"
none
"
saveTrace
(
`start serie
${
serieName
}
`
)
}
var
cptline
=
1
function
newLine
(
el
){
console
.
log
(
el
)
cptline
+=
1
var
newLine
=
el
.
parentElement
.
parentElement
.
cloneNode
(
true
)
newLine
.
id
=
"
divReponse
"
+
cptline
newLine
.
firstElementChild
.
firstElementChild
.
innerHTML
=
""
newLine
.
firstElementChild
.
firstElementChild
.
id
=
"
rep
"
+
cptline
newLine
.
lastElementChild
.
firstElementChild
.
id
=
"
btnEnter
"
+
cptline
newLine
.
lastElementChild
.
children
[
1
].
firstElementChild
.
setAttribute
(
'
onclick
'
,
"
playIpa(
"
+
cptline
+
"
)
"
)
newLine
.
lastElementChild
.
children
[
1
].
lastElementChild
.
id
=
"
debitParole
"
+
cptline
el
.
parentElement
.
parentElement
.
parentElement
.
insertBefore
(
newLine
,
el
.
parentElement
.
parentElement
.
nextElementSibling
)
changeLigne
(
newLine
.
firstElementChild
)
}
\ No newline at end of file
static/js/syntheseVocale.js
View file @
b179f9e6
...
...
@@ -3,7 +3,7 @@ var currentDebit = 80;
var
voix
=
"
f
"
var
lang
=
thisPageLang
async
function
playIpa
()
{
async
function
playIpa
(
line
=
""
)
{
var
synth
=
false
...
...
@@ -34,7 +34,7 @@ async function playIpa() {
}
else
if
(
thisAppli
==
"
phonoplayer
"
){
var
rep
=
document
.
getElementById
(
'
rep
'
)
var
rep
=
document
.
getElementById
(
'
rep
'
+
line
.
toString
()
)
ipa
=
""
for
(
i
=
0
;
i
<
rep
.
children
.
length
;
i
++
)
{
var
repphon
=
rep
.
children
[
i
].
classList
[
1
].
replace
(
"
rect
"
,
"
phon
"
)
...
...
@@ -66,19 +66,19 @@ async function playIpa() {
// ENVOI
const
response
=
await
fetch
(
'
/_playIpa/
'
,
options
)
const
data
=
await
response
.
json
();
readResponse
(
data
[
"
audio
"
]);
readResponse
(
data
[
"
audio
"
]
,
line
);
}
else
{
var
sv_audio
=
document
.
getElementsByTagName
(
"
audio
"
)[
0
];
sv_audio
.
playbackRate
=
document
.
getElementById
(
'
debitParole
'
).
value
/
100
;
sv_audio
.
playbackRate
=
document
.
getElementById
(
'
debitParole
'
+
line
.
toString
()
).
value
/
100
;
sv_audio
.
play
();
}
saveTrace
(
`playIpa [
${
ipa
}
]
${
voix
}
${
lang
}
${
document
.
getElementById
(
'
debitParole
'
).
value
}
`
)
saveTrace
(
`playIpa [
${
ipa
}
]
${
voix
}
${
lang
}
${
document
.
getElementById
(
'
debitParole
'
+
line
.
toString
()
).
value
}
`
)
}
function
readResponse
(
response
)
{
function
readResponse
(
response
,
line
)
{
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
;
sv_audio
.
playbackRate
=
document
.
getElementById
(
'
debitParole
'
+
line
.
toString
()
).
value
/
100
;
document
.
getElementById
(
'
audio
'
).
innerHTML
=
sv_audio
;
}
\ No newline at end of file
static/styles/player.css
View file @
b179f9e6
...
...
@@ -269,4 +269,17 @@
.switchable
:hover
{
border
:
1px
lightgrey
solid
;
border-radius
:
3px
;
}
/* BAC A SABLE */
.bacAsable
{
border
:
1px
solid
rgba
(
128
,
128
,
128
,
0.274
);
border-radius
:
5px
;
margin
:
0px
10px
;
padding
:
0px
5px
;
}
.ligneCible
{
border-color
:
rgba
(
0
,
0
,
0
,
0.521
);
}
\ No newline at end of file
templates/playerPhono.html
View file @
b179f9e6
...
...
@@ -49,7 +49,7 @@
<div
class=
"mainContent"
>
<div
style=
"width:90%;text-align: left;"
>
<div
id=
"retourHome"
style=
"width:90%;text-align: left;"
>
<a
href=
"/player/"
><button
type=
"button"
class=
"btn btn-outline-secondary"
><
Retour
</
button
></a>
</div>
...
...
@@ -79,10 +79,15 @@
</svg>
</button>
</div>
<div
class=
"divReponseMilieu d-flex align-items-center"
>
<div
id=
"rep"
class=
"d-flex align-items-center flex-wrap"
></div>
<div
class=
"divReponseMilieu d-flex align-items-center
flex-grow-1"
onclick=
"changeLigne(this)
"
>
<div
id=
"rep"
class=
"d-flex align-items-center flex-wrap
rep
"
></div>
</div>
<div
class=
"divReponseDroit d-flex"
>
<div
class=
"divReponseDroit d-flex align-items-center justify-content-around"
>
<button
type=
"button"
class=
"btn btn-outline-secondary"
id=
"btnEnter"
onclick=
"newLine(this)"
style=
"display: none;"
title=
"Aller à la ligne"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"20"
height=
"20"
fill=
"currentColor"
class=
"bi bi-arrow-return-left"
viewBox=
"0 0 16 16"
>
<path
fill-rule=
"evenodd"
d=
"M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"
/>
</svg>
</button>
{% if serieContent.syntheseVocale == "1" %}
<div
class=
"my-auto btn-lecture d-flex flex-column align-items-stretch pe-3"
>
<div
onclick=
"playIpa();"
style=
"cursor: pointer;"
title=
"Prononcer !"
>
...
...
@@ -97,6 +102,7 @@
<button
type=
"button"
class=
"btn btn-success btn-lg mx-auto"
onclick=
"checkAnswer()"
id=
"btnValider"
>
Valider
</button>
</div>
</div>
<div
id=
"divVideALaisserPourInsertNewLineBefore"
></div>
</div>
<div
id=
"audio"
style=
"display: none;"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment