Exécution d'un enregistrement audio

**Ysabell** · 02/10/2017, 16h10

Bonjour à Toutes et Tous,

Je suis nouvelle

Etudiante en économie. Avec un ami nous essayons de créer un petit site internet. Sur ce dernier les gens devraient pouvoir se présenter via un message audio. Nous avons trouvé un code qui marche parfaitement en local. Mais après transfert sur le serveur nous avons un souci. Il ne propose plus l'écoute des enregistrements. Il propose bien d'enregistrer mais n'affiche plus le player. Pourriez-vous nous aider ?

Vous trouverez tous les fichiers en pièces jointe (README.zip). Le nom du fichier à lancer est example_simple_exportwav

Voici ce que nous avons en local. Après avoir enregistré une présentation et cliquer sur stop, le player apparaît n'attendant plus que le clic sur "play" pour s'exécuter. Mais comme dit avant lorsque nous transférons le code plus bas, ce player n'apparaît plus.

1) En local Recording est là...

Nom : En local.JPG
Affichages : 890
Taille : 48,1 Ko

Nom : En local.JPG
Affichages : 890
Taille : 48,1 Ko

2) Sur serveur ce Recording n'apparait plus...

Nom : Recording absent.JPG
Affichages : 863
Taille : 14,1 Ko

Voici le code que nous avons trouvé:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Live input record and playback</title>
  <style type='text/css'>
    ul { list-style: none; }
    #recordingslist audio { display: block; margin-bottom: 10px; }
  </style>
</head>
<body>
 
  <h1>Recorder.js simple WAV export example</h1>
 
  <p>Make sure you are using a recent version of Google Chrome.</p>
  <p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p>
 
  <button onclick="startRecording(this);">record</button>
  <button onclick="stopRecording(this);" disabled>stop</button>
 
  <h2>Recordings</h2>
  <ul id="recordingslist"></ul>
 
  <h2>Log</h2>
  <pre id="log"></pre>
 
  <script>
  function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }
 
  var audio_context;
  var recorder;
 
  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.');
 
    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');
    
    recorder = new Recorder(input);
    __log('Recorder initialised.');
  }
 
  function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
  }
 
  function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('Stopped recording.');
    
    // create WAV download link using audio data blob
    createDownloadLink();
    
    recorder.clear();
  }
 
  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
  }
 
  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
      __log('Audio context set up.');
      __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
      alert('No web audio support in this browser!');
    }
    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });
  };
  </script>
 
  <script src="../dist/recorder.js"></script>
</body>
</html>

**NoSmoking** · 03/10/2017, 11h10

Bonjour,
première chose à faire vérifier les chemins d'accès aux fichiers (<script src="../dist/recorder.js"></script>), la console peut être très utile (F12).

**Ysabell** · 03/10/2017, 17h24

Cher NoSmoking,

Nous te remercions pour la réponse mais nous n'avons pas pu résoudre le problème. Peux-tu nous aider un peu plus. C'est urgent que nous résolvions ce problème;

Un grand merci pour votre aide.

Ysabell

**Loralina** · 04/10/2017, 10h04

Bonjour,
Dans votre page en ligne, il est sans doute écrit "'No live audio input: ...", non ?
L'utilisation de getUserMedia requiert en effet une origine sécurisée.
Il vous faudrait un HTTPS.
Pour un utilisateur donné, il est cependant possible de tester avec un HTTP, voir la manipulation donnée dans la deuxième réponse ici :
https://stackoverflow.com/questions/...king-on-chrome

Exécution d'un enregistrement audio

JavaScript

Discussions similaires

Partager

Partager