py-player

Appearance

Internationalization ​

All UI strings in py-player can be overridden without modifying the library. Override individual strings via HTML attribute or JavaScript API.

Default Strings ​

typescript
const DEFAULT_STRINGS = {
  nowPlaying: 'Now playing',
  playlist: 'Playlist',
  trackCount: '{count} tracks',
  noTracks: 'No tracks yet',
  uploadPrompt: 'Click to select audio file',
  prev: 'Previous',
  play: 'Play',
  pause: 'Pause',
  next: 'Next',
  fullscreen: 'Fullscreen',
  exitFullscreen: 'Exit fullscreen',
  pip: 'Picture in Picture',
  speed: 'Playback speed',
  volume: 'Volume',
  mute: 'Mute',
  unmute: 'Unmute',
  skipBack: 'Skip back',
  skipForward: 'Skip forward',
  unsupportedFormat: 'Your browser cannot play this media format ({format})',
  unsupportedHint: 'Try a different browser or format.',
  hlsRequired: 'HLS streaming requires Safari or the hls.js library',
}

Override via Attribute ​

Pass a JSON object to the strings attribute. Only the keys you provide are replaced — everything else falls back to English defaults.

html
<py-audio
  src="audio.mp3"
  strings='{"nowPlaying":"Đang phát","noTracks":"Chưa có track nào","playlist":"Danh sách"}'
></py-audio>

Override via JavaScript API ​

js
const player = document.querySelector('py-audio')

player.setStrings({
  nowPlaying: 'Đang phát',
  playlist: 'Danh sách',
  trackCount: '{count} bài',
  play: 'Phát',
  pause: 'Tạm dừng',
  prev: 'Trước',
  next: 'Tiếp',
})

Variable Interpolation ​

Strings with {placeholder} syntax are interpolated:

js
// "trackCount": "{count} tracks"
// With { count: 5 } → "5 tracks"

player.setStrings({ trackCount: '{count} bài hát' })
// With 5 tracks → "5 bài hát"

Example: Vietnamese ​

html
<py-audio
  id="player"
  src="audio.mp3"
  title="Podcast Tiếng Việt"
  theme="dark"
></py-audio>

<script>
  document.getElementById('player').setStrings({
    nowPlaying: 'Đang phát',
    playlist: 'Danh sách phát',
    trackCount: '{count} bài',
    noTracks: 'Chưa có bài nào',
    uploadPrompt: 'Nhấn để chọn tệp âm thanh',
    play: 'Phát',
    pause: 'Tạm dừng',
    prev: 'Trước',
    next: 'Tiếp theo',
  })
</script>

Example: French ​

html
<py-audio
  src="audio.mp3"
  strings='{"nowPlaying":"En cours","playlist":"Playlist","play":"Lire","pause":"Pause","prev":"Précédent","next":"Suivant","noTracks":"Aucune piste"}'
></py-audio>

Example: Japanese ​

js
player.setStrings({
  nowPlaying: '再生中',
  playlist: 'プレイリスト',
  trackCount: '{count} トラック',
  play: '再生',
  pause: '一時停止',
  prev: '前へ',
  next: '次へ',
})