Javascript audio player for the exported HTML file.

webrtc/modules/audio_processing/test/py_quality_assessment/quality_assessment/results.js

+// Copyright (c) 2017 The WebRTC project authors. All Rights Reserved.
+//
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file in the root of the source
+// tree. An additional intellectual property rights grant can be found
+// in the file PATENTS.  All contributing project authors may
+// be found in the AUTHORS file in the root of the source tree.
+
+/**
+ * Inspector UI class.
+ * @constructor
+ */
+function Inspector() {
+  this._audio_player = new Audio();

[janssonWebRTC, 2017/03/02 10:19:33]

The snake_case looks like a carry over from python, for javascript use
camelCase. HTML elements you can use either dash-form or camelCase. This applies
to the whole file.

https://www.chromium.org/developers/web-development-style-guide

[AleBzk, 2017/03/02 11:06:11]

Done.

[AleBzk, 2017/03/02 11:06:11]

Done.

+  this._inspector_node = document.createElement('div');
+  this._div_noise_generator = document.createElement('div');
+  this._div_noise_parameters = document.createElement('div');
+  this._button_play_audio_in = document.createElement('button');
+  this._button_play_audio_out = document.createElement('button');
+  this._button_play_audio_ref = document.createElement('button');
+  this._button_stop_audio = document.createElement('button');
+
+  this._selected_item = null;
+  this._audio_in_url = null;
+  this._audio_out_url = null;
+  this._audio_ref_url = null;
+}
+
+/**
+ * Initialize.
+ */
+Inspector.prototype.init = function() {
+  window.event.stopPropagation();
+
+  // Create inspector UI.
+  this._build_inspector();
+  var body = document.getElementsByTagName('body')[0];
+  body.appendChild(this._inspector_node);
+
+  // Bind click handler.
+  var self = this;
+  var items = document.getElementsByClassName('score');
+  console.debug('number of "score" items: ' + items.length);

[janssonWebRTC, 2017/03/02 10:19:33]

This is the only place where you have used the console, is this a leftover from
debugging or do you need it?

[AleBzk, 2017/03/02 11:06:11]

Done.

[AleBzk, 2017/03/02 11:06:11]

Thanks, it's the second :)
I'll remove the line.

+  for (var index = 0; index < items.length; index++) {
+    items[index].onclick = function() {
+      self.open_inspector(this);
+    };
+  }
+
+  // Bind pressed key handlers.
+  var self = this;
+  window.onkeyup = function(e) {
+    var key = e.keyCode ? e.keyCode : e.which;
+    switch (key) {
+      case 49:

[janssonWebRTC, 2017/03/02 10:19:33]

Since there are so few key bindings, maybe include a comment of which actual
keyboard key they represent?

[AleBzk, 2017/03/02 11:06:11]

Done.

+        self.play_audio_in();
+        break;
+      case 50:
+        self.play_audio_out();
+        break;
+      case 51:
+        self.play_audio_ref();
+        break;
+      case 83:
+      case 115:
+        self.stop_audio();
+        break;

[janssonWebRTC, 2017/03/02 10:19:33]

Unnecessary break.

[AleBzk, 2017/03/02 11:06:11]

True, but isn't it safer to keep it?
If someone adds a case entry below, he/she would probably need to add break.

[janssonWebRTC, 2017/03/02 12:03:20]

That's true, will leave it up to you.

+    }
+  };
+};
+
+/**
+ * Open the inspector.
+ * @param {DOMElement} target: score element that has been clicked.
+ */
+Inspector.prototype.open_inspector = function(target) {
+  if (this._selected_item != null) {
+    this._selected_item.classList.remove('selected');
+  }
+  this._selected_item = target;
+  this._selected_item.classList.add('selected');
+
+  var target = this._selected_item.querySelector('.noise-desc');
+  var noise_name = target.querySelector('input[name=noise_name]').value;
+  var noise_params = target.querySelector('input[name=noise_params]').value;
+  var audio_in = target.querySelector('input[name=audio_in]').value;
+  var audio_out = target.querySelector('input[name=audio_out]').value;
+  var audio_ref = target.querySelector('input[name=audio_ref]').value;
+
+  this._div_noise_generator.innerHTML = noise_name;
+  this._div_noise_parameters.innerHTML = noise_params;
+
+  this._audio_in_url = audio_in;
+  this._audio_out_url = audio_out;
+  this._audio_ref_url = audio_ref;
+};
+
+/**
+ * Play APM audio input signal.
+ * @param {string} url
+ */
+Inspector.prototype.play_audio_in = function(url) {

[janssonWebRTC, 2017/03/02 10:19:33]

url is unused.

[AleBzk, 2017/03/02 11:06:11]

Done.

+  this._play(this._audio_in_url);
+};
+
+/**
+ * Play APM audio output signal.
+ * @param {string} url
+ */
+Inspector.prototype.play_audio_out = function(url) {

[janssonWebRTC, 2017/03/02 10:19:33]

url is unused.

[AleBzk, 2017/03/02 11:06:11]

Done.

+  this._play(this._audio_out_url);
+};
+
+/**
+ * Play APM audio reference signal.
+ * @param {string} url
+ */
+Inspector.prototype.play_audio_ref = function(url) {

[janssonWebRTC, 2017/03/02 10:19:32]

url is unused.

[AleBzk, 2017/03/02 11:06:11]

Done.

+  this._play(this._audio_ref_url);
+};
+
+/**
+ * Stop playing audio.
+ */
+Inspector.prototype.stop_audio = function() {
+  this._audio_player.pause();
+};
+
+/**
+ * Play audio file from url.
+ * @param {string} url
+ */
+Inspector.prototype._play = function(url) {
+  if (url == null) {
+    alert('Select a score firts.');

[janssonWebRTC, 2017/03/02 10:19:33]

firts > first

[AleBzk, 2017/03/02 11:06:11]

Done.

+    return;
+  }
+
+  this._audio_player.src = url;
+  this._audio_player.play();
+};
+
+/**
+ * Build inspector.
+ */
+Inspector.prototype._build_inspector = function() {
+  var self = this;
+
+  this._inspector_node.setAttribute('class', 'inspector');
+  this._inspector_node.innerHTML = '<div class="property noise-generator">' +

[janssonWebRTC, 2017/03/02 10:19:33]

Maybe you could use document.createElement() here as well as you have done in
the function Inspector() constructor and then add them as child nodes?

[AleBzk, 2017/03/02 11:06:11]

Thanks for your comment.
I used createElement() for those DOM nodes I need to access.
In this case, it's better to use innerHTML to reduce boilerplate code and make
the code more readable.

[janssonWebRTC, 2017/03/02 12:03:20]

Ah right, I get your point.

+                                     '<div class="name">noise generator</div>' +
+                                   '</div>' +
+                                   '<div class="property noise-parmas">' +
+                                     '<div class="name">parameters</div>' +
+                                   '</div>' +
+                                   '<div class="buttons"></div>';
+
+  // Add value nodes.
+  function add_value_node(node, parent_selector) {
+    node.setAttribute('class', 'value');
+    node.innerHTML = '-';
+    var parent_node = self._inspector_node.querySelector(parent_selector);
+    parent_node.appendChild(node);
+  }
+  add_value_node(this._div_noise_generator, 'div.noise-generator');
+  add_value_node(this._div_noise_parameters, 'div.noise-parmas');
+
+  // Add buttons.
+  var buttons_node = this._inspector_node.querySelector('div.buttons');
+  function add_button(node, caption, callback) {
+    node.innerHTML = caption;
+    buttons_node.appendChild(node);
+    node.onclick = callback.bind(self);
+  }
+  add_button(this._button_play_audio_in, 'A_in (<strong>1</strong>)',
+             this.play_audio_in);
+  add_button(this._button_play_audio_out, 'A_out (<strong>2</strong>)',
+             this.play_audio_out);
+  add_button(this._button_play_audio_ref, 'A_ref (<strong>3</strong>)',
+             this.play_audio_ref);
+  add_button(this._button_stop_audio, '<strong>S</strong>top', this.stop_audio);
+};
+
+/**
+ * Instance and initialize the inspector.
+ */
+function initialize() {
+  var inspector = new Inspector();
+  inspector.init();
+}