A-Tractor - v2.3.1
    Preparing search index...

    Media player.

    See class description here.

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

    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 { MediaPlayer, FrequencyAnalyzer } from '@sad-systems/a-tracktor';

    const MEDIA_SOURCE1 = 'audio.mp3';
    const MEDIA_POSTER1 = 'image.jpg';
    const MEDIA_SOURCE2 = 'audio2.mp3';
    const MEDIA_POSTER2 = 'image2.jpg';

    const mediaPlayer = new MediaPlayer(MEDIA_SOURCE1, {
      poster: MEDIA_POSTER1,
      viewElement: '.media-player', // Find existed DOM element by CSS selector.
      analyzerOptions: { color: '#f00' }, // Set color of audio analyzer.
    });

    // Just to debug: change the media in 5 seconds.
    setTimeout(() => {
      console.log('Change media source');
      mediaPlayer.setMediaSource(MEDIA_SOURCE2);
      mediaPlayer.setPoster(MEDIA_POSTER2);
    }, 5000);

    Case 2. With auto created view element and manually added to web page.

    const el = document.body;
    const mediaPlayer = new MediaPlayer(MEDIA_SOURCE1, {
      poster: MEDIA_POSTER1,
      // More options:
      analyzerClass: FrequencyAnalyzer,
      analyzerOptions: { color: '#0f0' },
      mediaTimePointerOptions: { pointerStyle: { top: '', bottom: '', background: '#00ff0082' } },
    });

    el.append(mediaPlayer.getViewElement());

    Settings

    Member Visibility

    On This Page

    Media player.