[3.3][RC] Audio Player 🎶

๐Ÿ†“ Audio player with playlists and GFX visualizer


Locked
User avatar
3Di
Founder
Founder
Posts: 1705
Joined: 12 Mar 2018 20:10
Location: Milan (IT) Frankfurt (DE)
Contact:

[3.3][RC] Audio Player 🎶

Post by 3Di »

๐ŸŽถ Audio Player ๐ŸŽต

โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰ยป phpBB Studio
โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰:label: 1.0.3-RC
โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰ โ€‰โ€‰โ€‰ :tools: โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰
โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰ โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰โ€‰phpBB >= 3.3.3

:inbox_tray: Download: extensions/audio-player-playlist

Description:

  • Playlists as CSV or TXT attachments

  • GFX visualizer - overlaps the bottom of the cover image

  • Progress bar with progression time and duration.

  • Volume slider (0 to 100)

  • Actions:

    • Play, Stop, Pause, Next, Previous, Forward and Backward (20 sec. step), toggle visualizer, toggle mute, toggle repeat track.
  • Automatic loop on play, the player loads stopped.

  • Player is visible only in the first post of the topics.

  • Player is not quotable nor preview-able.

  • Only playlists with our custom header will be embedded.

  • Standard CSV / TXT are parsed as usual.

  • Multiple playlists in the same topic will be merged automatically into the player.

  • Permissions are those native of phpBB about attachments.

  • Collapsible playlist

  • Hidden playlist attachmentโ€™s download

  • PHP 8 ready

Author notes:

  • Made using the Web Audio API and a mix of 2 snippets slightly modified by 3Di.

  • Due to cross-origin security rules only local files will be played with the visualizer

    • (there is a toggle button, can otherwise be set on a per forum basis)

Tested audio type:

  • MP3, AAC, WAV, FLAC

Credits:

  • Special thanks to Obfuscated who has made this work current and distributable.

  • Code contributors are credited in the code itself where appropriated.

  • Kevin MacLeod (incompetech.com) for demo songs (full credits and license inside).

:film_projector: Demo: https://proteus.phpbbstudio.com/viewtopic.php?f=2&t=12
Image

๐Ÿ‡ช๐Ÿ‡บ Honour and respect to all the Healthcare Heroes. ๐Ÿ‡ฎ๐Ÿ‡น


User avatar
3Di
Founder
Founder
Posts: 1705
Joined: 12 Mar 2018 20:10
Location: Milan (IT) Frankfurt (DE)
Contact:

[3.3][RC] Audio Player 🎶

Post by 3Di »

  1. Once installed, you need to enable the visualizer for each forum where you want local files to be hosted.

  2. Go to ACP->Forums and edit the forum where you want to host only local files and have the visualizer,
    scroll down the page and you will find the option.

  3. In all other forums the visualizer is already disabled, so external files can be played without CORS problems.

Image

๐Ÿ‡ช๐Ÿ‡บ Honour and respect to all the Healthcare Heroes. ๐Ÿ‡ฎ๐Ÿ‡น


User avatar
3Di
Founder
Founder
Posts: 1705
Joined: 12 Mar 2018 20:10
Location: Milan (IT) Frankfurt (DE)
Contact:

[3.3][RC] Audio Player 🎶

Post by 3Di »

โ€”โ€”โ€”โ€” About the colors of bars โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”

OPEN ROOT\ext\phpbbstudio\app\event\main_listener.php

FIND

			'APP_VISUALIZER_COL_T'	=> 'ff0000', // Top
			'APP_VISUALIZER_COL_M'	=> 'ffff00', // Middle
			'APP_VISUALIZER_COL_B'	=> '00ff00', // Bottom

Change the values accordingly to your likes. Ref: https://www.color-hex.com/

โ€”โ€”โ€”โ€” About the CSV โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”

  1. The header (first line) must remain untouched! The logic only embeds lists with it in place.

  2. Delimiters and separator [ " ] and [ , ] can not be changed nor removed

  3. No blank new lines at the end.


Example of CSV file (playlist) with local files in the same ROOT

"song_title","site_url","song_origin","cover_origin","cover_album_origin","artist","album"
"Song 1","ROOT/media/album1/","01.mp3","cover1.jpg","cover_album1.jpg","John Doe","Album 1"
"song 2","ROOT/media/album1/","02.mp3","cover2.jpg","cover_album2.jpg","John Doe","Album 1"

Example using absolute (external) URLs - No visualizer

"song_title","site_url","song_origin","cover_origin","cover_album_origin","artist","album"
"Song 1","","https://example.ltd/01.mp3","https://example.com/cover1.jpg","https://example.org/cover_album1.jpg","John Doe","Album title 1"
"song 2","","https://example.com/02.mp3","https://example.org/cover2.jpg","https://example.ltd/cover_album2.jpg","John Doe","Album title 2"

๐Ÿ‡ช๐Ÿ‡บ Honour and respect to all the Healthcare Heroes. ๐Ÿ‡ฎ๐Ÿ‡น


User avatar
3Di
Founder
Founder
Posts: 1705
Joined: 12 Mar 2018 20:10
Location: Milan (IT) Frankfurt (DE)
Contact:

[3.3][RC] Audio Player 🎶

Post by 3Di »

v1.0.2-RC released - See first post for d/l and demo

### v1.0.2-RC on 27-aug-2021

  • Hide playlist attachmentโ€™s download
  • jQuery optimisation
  • Code optimisation
  • Added version-check

๐Ÿ‡ช๐Ÿ‡บ Honour and respect to all the Healthcare Heroes. ๐Ÿ‡ฎ๐Ÿ‡น


User avatar
3Di
Founder
Founder
Posts: 1705
Joined: 12 Mar 2018 20:10
Location: Milan (IT) Frankfurt (DE)
Contact:

[3.3][RC] Audio Player 🎶

Post by 3Di »

v1.0.3-RC released - See first post for d/l and demo

### v1.0.3-RC on 15-sep-2021

  • Properly escape JS vars
  • Properly manage read file content for this use case
  • Fixed potential bug on user mistake (never delete attachments directly on FS)
  • CSS optimisation

๐Ÿ‡ช๐Ÿ‡บ Honour and respect to all the Healthcare Heroes. ๐Ÿ‡ฎ๐Ÿ‡น


Locked