Media player factory.

1. Define HTML container.

<body>
  <div class="media-player-list"></div>
</body>

2. Import classes and styles.

import '@sad-systems/a-tracktor/css/media-player.css'; // Use defaults media player and list CSS styles.
// Also you can use SCSS styles from:
// '@sad-systems/a-tracktor/styles/media-player.scss'.
import { MediaPlayerFactory, FrequencyAnalyzer } from '@sad-systems/a-tracktor';

3. Set the list of media files and player options.

const mediaList = [
  {
    // First media with default params.
    source: 'audio1.mp3',
    playerOptions: {
      poster: 'image1.jpg',
    },
  },
  {
    // Second media with additional params.
    source: 'audio2.mp3',
    playerOptions: {
      poster: 'image2.jpg',
      volume: 0.5, // 50% of volume
      position: 5, // offset in seconds
      analyzerClass: FrequencyAnalyzer,
      analyzerOptions: { color: '#f00' },
      mediaTimePointerOptions: { pointerStyle: { top: '', bottom: '', background: '#f00' } },
    },
  },
  // ...
];

4. Create media player factory (with options if needed).

const mediaPlayerFactory = new MediaPlayerFactory({ loop: true, single: false, volume: 0.75 });

5. Create media players and add them to the web page.

const elContainer = document.querySelector('.media-player-list');

for (let item of mediaList) {
  const newPlayer = mediaPlayerFactory.createMediaPlayer(item.source, item.playerOptions);

  elContainer.append(newPlayer.getViewElement());
}

Media player factory.

1. Define HTML container.

2. Import classes and styles.

3. Set the list of media files and player options.

4. Create media player factory (with options if needed).

5. Create media players and add them to the web page.

Settings

On This Page