Skip to main content
Open Tarteel provides comprehensive audio controls to enhance your listening experience. This guide covers all available playback features and how to use them effectively.

​
Basic Playback Controls

​
Play/Pause

The central play/pause button controls audio playback:
  • Click to start or pause playback
  • The button animates when transitioning states
  • Works in both normal and fullscreen modes

​
Track Navigation

Previous Track (Backward button):
  • Skips to the previous recitation in the playlist
  • Located to the right of the play/pause button
Next Track (Forward button):
  • Advances to the next recitation
  • Located to the left of the play/pause button

​
Volume Control

The volume control provides precise audio level adjustment:
1

Open Volume Slider

Click the volume icon (speaker) at the far right of the control bar
2

Adjust Volume

A vertical slider appears above the icon. Drag it up or down to adjust volume from 0 to 100%
3

Close Slider

Click anywhere outside the volume control or click the icon again to close the slider
The volume icon changes from a full speaker (BiVolumeFull) to a muted speaker (BiVolumeMute) when volume is at 0.

​
Playback Modes

Open Tarteel offers three playback modes that cycle through with each click:

​
Mode 1: Off (Default)

  • Plays tracks in order from the playlist
  • Stops at the end of the playlist
  • Icon: Grayed-out shuffle icon

​
Mode 2: Shuffle

  • Plays tracks in random order
  • Continues indefinitely with randomized selection
  • Icon: Blue shuffle icon
  • Visual indicator: Button animates when enabled

​
Mode 3: Repeat One

  • Repeats the current track indefinitely
  • Perfect for memorization or focused listening
  • Icon: Blue repeat-one icon (MdRepeatOne)
  • Visual indicator: Button animates when enabled
Click the playback mode button to cycle: Off → Shuffle → Repeat One → Off

​
Playback Speed

Adjust the playback speed to match your listening preference: Available Speeds: 1.0x (normal), 1.5x, 2.0x

​
Desktop

  • Click the speed icon (MdSpeed) in the control bar
  • A badge appears on the icon showing the current speed when not at 1x
  • Cycles through: 1x → 1.5x → 2x → 1x

​
Mobile

  • Access via the “More” menu (⋯ button)
  • Select “Playback speed” to cycle through options
  • Current speed is displayed in the menu item
Playback speed is useful for learning purposes - use 0.75x for detailed study or 1.5x for review.

​
Sleep Timer

The sleep timer automatically pauses playback after a set duration:

​
Available Durations

  • 5 minutes
  • 10 minutes
  • 15 minutes
  • 30 minutes
  • 60 minutes
  • Until End: Continues until the current track finishes (up to 120 minutes)

​
Desktop Usage

1

Open Sleep Timer

Click the sleep icon (moon) in the control bar
2

Select Duration

Choose from the available time options or select “Until End”
3

Monitor Timer

A blue badge appears on the icon showing remaining minutes
4

Cancel Timer (Optional)

Open the sleep menu again and click “Cancel Timer” button

​
Mobile Usage

1

Open More Menu

Tap the three dots (⋯) button
2

Select Sleep Timer

Choose a duration from the sleep timer section at the top of the menu
3

Monitor Timer

The remaining time displays as a badge with the moon icon in the control bar
When the sleep timer expires, playback will pause automatically. The timer will be cleared and must be set again if needed.

​
Playlist Management

​
Opening the Playlist

Desktop: Click the playlist icon (music notes) in the control bar Mobile: Access via the “More” menu → “Toggle playlist” The playlist displays:
  • All available recitations for the selected reciter
  • Current playing track highlighted
  • Track duration and title
Playlist visibility is controlled independently of other player settings.

​
Fullscreen Mode

In fullscreen mode, the player interface is simplified to show only essential controls:

​
Entering Fullscreen

Desktop: Click the fullscreen icon (BsFullscreen) in the control bar Mobile: Access via “More” menu → fullscreen option

​
Fullscreen Controls

When in fullscreen, only three controls are visible:
  • Previous track button
  • Play/Pause button (centered, larger)
  • Next track button

​
Exiting Fullscreen

Desktop: Click the exit fullscreen icon (BsFullscreenExit) Mobile: Access via “More” menu again Browser: Press the Escape key
Fullscreen mode is perfect for distraction-free listening or when displaying on a larger screen.

​
Audio Visualizer

The visualizer provides visual feedback for the audio:
  • Toggle via the spectrum icon in the control bar (desktop)
  • Access via “More” menu on mobile
  • Shows real-time audio frequency visualization
The visualizer cannot be toggled while audio is playing. Pause playback first to change this setting.

​
State Persistence

All audio control preferences are saved locally:
  • Volume level (0-1 range)
  • Playback speed (1, 1.5, or 2)
  • Playback mode (off, shuffle, repeat-one)
  • Visualizer visibility
  • Current playback position
These settings persist across browser sessions and page refreshes.

​
Mobile vs Desktop Experience

​
Desktop (sm breakpoint and above)

  • All controls visible in the main control bar
  • Direct access to all features
  • Larger clickable areas
  • Separate sleep timer dropdown

​
Mobile

  • Compact control bar with essential buttons
  • “More” menu (⋯) consolidates secondary features:
    • Sleep timer with all duration options
    • Fullscreen toggle
    • Visualizer toggle
    • Playback speed control
    • Playlist toggle
  • Sleep timer badge visible when active
On mobile, long-press on control buttons may show tooltips with feature descriptions.

Build docs developers (and LLMs) love

Get started for freeTalk to us