<commit_before>[![Dependency Status](http://david-dm.org/colektivo/song-song-song.svg)](http://david-dm.org/colektivo/song-song-song)

# Song Song Song

A song as a single page application using React to easily customize the player based on SoundManager2.

This is not production ready, is on exploring phase.

### Components

```
+---+Song Song Song App+--------------------------------------------------------------------------+
|                                                                                                 |
| +--+Player Container+-------------------------------------------------------------------------+ |
| |                                                                                             | |
| | +----+Standard Player+--------------------------------------------------------------------+ | |
| | |                                                                                         | | |
| | | +-+Play Button+-----+ +-+Song Info+---------------------------------------+ +-+Volume-+ | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | +---------------------------------------------------+ |         | | | |
| | | |                   |                                                       |         | | | |
| | | |                   | +-+Play progress+-----------------------------------+ |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |+--Time-----+  +Track Progress-------+ +-Duration-+| |         | | | |
| | | |                   | ||           |  |                     | |          || |         | | | |
| | | |                   | ||           |  |      +--progress--+ | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      +------------+ | |          || |         | | | |
| | | |                   | ||           |  |                     | |          || |         | | | |
| | | |                   | |+-----------+  +---------------------+ +----------+| |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | +-------------------+ +---------------------------------------------------+ +---------+ | | |
| | |                                                                                         | | |
| | +-----------------------------------------------------------------------------------------+ | |
| |                                                                                             | |
| |                                                                                             | |
| |                                                                                             | |
| |                                                                                             | |
| +---------------------------------------------------------------------------------------------+ |
|                                                                                                 |
+-------------------------------------------------------------------------------------------------+

```

### Sample?

```javascript

soundManager.onready(function(){
  console.log("SoundManager ready");

  var sound = soundManager.createSound({

    id: 'mysong',
    autoLoad: false,
    autoPlay: false,
    url: url
  });

  React.render(
      /*jshint ignore:start */
      <SongSongSongApp sound={sound} songName='Morir por qué?' author='<NAME>' fullWidth='true' />,
      /*jshint ignore:end */
      document.getElementById('app')
  );
  
});

```

### Usage

```

npm install
npm start

# open http://localhost:3000/

```




### ToDo

* avoid text selection when dragging volume
* move sample app to examples
* review directory structure
* check what to do with warnings and unsupported properties on Radium
* make it major browsers resistent
* Add tests (after exploring phase)
* Implement onError
* Implement onLoad
* Implement whileloading for flash player<commit_msg>remove outdated sample<commit_after>[![Dependency Status](http://david-dm.org/colektivo/song-song-song.svg)](http://david-dm.org/colektivo/song-song-song)

# Song Song Song

A song as a single page application using React to easily customize the player based on SoundManager2.

This is not production ready, is on exploring phase.

### Components

```
+---+Song Song Song App+--------------------------------------------------------------------------+
|                                                                                                 |
| +--+Player Container+-------------------------------------------------------------------------+ |
| |                                                                                             | |
| | +----+Standard Player+--------------------------------------------------------------------+ | |
| | |                                                                                         | | |
| | | +-+Play Button+-----+ +-+Song Info+---------------------------------------+ +-+Volume-+ | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | +---------------------------------------------------+ |         | | | |
| | | |                   |                                                       |         | | | |
| | | |                   | +-+Play progress+-----------------------------------+ |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | |                   | |+--Time-----+  +Track Progress-------+ +-Duration-+| |         | | | |
| | | |                   | ||           |  |                     | |          || |         | | | |
| | | |                   | ||           |  |      +--progress--+ | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      |            | | |          || |         | | | |
| | | |                   | ||           |  |      +------------+ | |          || |         | | | |
| | | |                   | ||           |  |                     | |          || |         | | | |
| | | |                   | |+-----------+  +---------------------+ +----------+| |         | | | |
| | | |                   | |                                                   | |         | | | |
| | | +-------------------+ +---------------------------------------------------+ +---------+ | | |
| | |                                                                                         | | |
| | +-----------------------------------------------------------------------------------------+ | |
| |                                                                                             | |
| |                                                                                             | |
| |                                                                                             | |
| |                                                                                             | |
| +---------------------------------------------------------------------------------------------+ |
|                                                                                                 |
+-------------------------------------------------------------------------------------------------+

```

### Usage

```

npm install
npm start

# open http://localhost:3000/

```


### ToDo

* avoid text selection when dragging volume
* move sample app to examples
* review directory structure
* check what to do with warnings and unsupported properties on Radium
* make it major browsers resistent
* Add tests (after exploring phase)
* Implement onError
* Implement onLoad
* Implement whileloading for flash player
{'fraction_non_alphanumeric': 0.2776812186892956, 'fraction_numerical': 0.0010223903486351088, 'mean_word_length': 0.3873209473833499, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 190, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '848994', 'n_tokens_mistral': 1898, 'n_tokens_neox': 1790, 'n_words': 238}