fix(sound): replace Sound components by react-sound-html5 module

app/App.js

@@ -5,6 +5,8 @@ import { bindActionCreators } from 'redux';
 import { NavLink, withRouter } from 'react-router-dom';
 import classnames from 'classnames';
 import _ from 'lodash';
+import Sound from 'react-sound-html5';
+
 import * as Actions from './actions';
 import * as PlayerActions from './actions/player';
 import * as PlaylistsActions from './actions/playlists';
@@ -25,7 +27,6 @@ import { config as PluginConfig } from './plugins/config';
 import settingsConst from './constants/settings';
 
 import PlaylistsSubMenu from './components/PlaylistsSubMenu';
-import Sound from './components/Sound';
 import Footer from './components/Footer';
 import Navbar from './components/Navbar';
 import VerticalPanel from './components/VerticalPanel';

app/actions/player.js

@@ -1,4 +1,4 @@
-import Sound from '../components/Sound';
+import Sound from 'react-sound-html5';
 import { sendPaused, sendPlay } from '../mpris';
 
 export const START_PLAYBACK = 'START_PLAYBACK';

app/containers/ShortcutsContainer/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as Mousetrap from 'mousetrap';
+import Sound from 'react-sound-html5';
 
-import Sound from '../../components/Sound';
 import * as PlayerActions from '../../actions/player';
 import * as QueueActions from '../../actions/queue';
 

app/containers/SoundContainer/index.js

@@ -3,13 +3,14 @@ import { withRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import _ from 'lodash';
+import Sound from 'react-sound-html5';
 
 import * as Actions from '../../actions';
 import * as PlayerActions from '../../actions/player';
 import * as QueueActions from '../../actions/queue';
 import * as ScrobblingActions from '../../actions/scrobbling';
 import * as LyricsActions from '../../actions/lyrics';
-import Sound from '../../components/Sound';
+import { filterFrequencies } from '../../components/Equalizer';
 import { getSelectedStream } from '../../utils';
 import * as Autoradio from './autoradio';
 import globals from '../../globals';
@@ -168,7 +169,10 @@ class SoundContainer extends React.Component {
         onLoad={this.handleLoaded.bind(this)}
         position={player.seek}
         volume={player.muted ? 0 : player.volume}
-        equalizer={equalizer}
+        equalizer={filterFrequencies.reduce((acc, freq, idx) => ({
+          ...acc,
+          [freq]: equalizer[idx] || 0
+        }), {})}
       />
     );
   }

app/reducers/player.js

@@ -1,4 +1,4 @@
-import Sound from '../components/Sound';
+import Sound from 'react-sound-html5';
 
 import {
   START_PLAYBACK,

package.json

@@ -46,9 +46,9 @@
     "billboard-top-100": "^2.0.8",
     "bluebird": "^3.5.3",
     "body-parser": "^1.18.3",
-    "cors": "^2.8.5",
     "chart.js": "^2.8.0",
     "cheerio": "^1.0.0-rc.2",
+    "cors": "^2.8.5",
     "d3-drag": "^1.2.3",
     "d3-selection": "^1.4.0",
     "electron-platform": "^1.2.0",
@@ -72,6 +72,7 @@
     "react-dom": "^16.3.2",
     "react-image-smooth-loading": "^2.0.0",
     "react-range-progress": "^4.0.3",
+    "react-sound-html5": "^1.0.1",
     "react-toastify": "^4.5.2",
     "semantic-ui-react": "^0.82.1",
     "simple-get-lyrics": "0.0.4",