Click image to view demo
Audio Waveform Player is responsive and fully customizable HTML5 audio plugin. It comes with many different layouts and presets that can be used out right of the box and even customized deeply if required.
Plugin will create waveform from audio track automatically and displays it as a audio progress seekbar.
It uses Web Audio Api to create beautiful image waveforms to display sound progress. Audio waveforms can also be created using predefined peak data and in a form of images to cover all use cases, regardless of media its presented on.
It support self hosted audio fiormats and some many external music services and libraries like Soundcloud music, RSS Podcasts, Google Drive Storage and more.
Suport for most HTML5 audio formats including mp3, wav and aac audio.Features and options:
- Responsive layouts
- Font Awesome Library icons
- Only mp3 audio format required for all browsers and devices
- Several methods to create waveform:
- using Web Audio Api
- using predefined peak data array
- image predefined image waveform
- Playlist options available:
- Audio playlist (mp3, wav, aac)
- Auto create playlist from folder of mp3 files (and get id3 tags)
- Podcasts
- SoundCloud
- Google Drive, Amazon S3
- Mix different media types in the same playlist
- Include multiple instances in the same page
- Optional playlist
- Optional song url link in playlist
- Filter tracks in playlist by title
- Optional playlist scroll (scroll orientation vertical / horizontal)
- Optional tooltips
- Optional song download
- Optional random playback
- Optional song playback speed
- Optional song start / end time
- Media end action (go to next song / loop current song / stop at song start or end)
- Optional keyboard audio navigation (pause/play, mute/unmute, next, previous)
- Automatically created thumbnails for podcast, soundcloud
- Optional social share (facebook, twitter, tumblr + other social networks can be implemented)
- API methods available to call function when player is running
- Event callbacks support for all major actions with the player
Note:
This is a jQuery version of the plugin. If you need WordPress version look here: Audio Waveform Player with Playlist WP Plugin
1. SoundCloud requires API key (make sure you have one or that you can obtain it from SoundCloud)
2. PHP is required for making wave files and some other features.
3. We cannot guarantee compatibility with all RSS podcasts out there, so if you want to make sure our application works with your podcast, provide us a podcast link before purchase so we can check.
Updates / Changelog
UPDATE 4.2 [15.3.2022]
- [ADD] add rel attribute for playlist item link - [ADD] play audio from OneDrive (single or folder)
UPDATE 4.1 [8.9.2021]
- [UPDATE] added Amazon S3 region setting - [UPDATE] resume S3 audio if url expires - [ADD] Cloudfront integration with S3
UPDATE 4.0 [28.8.2021]
- [UPDATE] option to add any kind of icons in player buttons (font icons, images, svg...) - [UPDATE] option to play offline without server (valid for image icons, image waveform and direct link to audio files) - [UPDATE] latest version wavesurfer compatibility - [UPDATE] new option to generate image waveforms - [UPDATE] read folder of audio files in custom directory on server - [UPDATE] keyboard controls for playback - [UPDATE] responsive players - [UPDATE] when song search is active play only results find by search - [ADD] option to use Perfect scrollbar instead of mCustomScroll in playlist - [ADD] Google Analytics - [ADD] media session - [ADD] playback rate slider in player - [ADD] option to disable song seek / change - [ADD] option to pause one player when another is playing - [ADD] new single player skin - [ADD] responsive javascript breakpoints so player can resize in widget area or similar smaller part of the website - [ADD] option to sort songs on player start by title - [ADD] query string parameters - [ADD] add any number of custom icons in playlist (go to url) - [ADD] load Json playlist - [ADD] WhatsApp share - [ADD] remember playback position when changing page - [ADD] autoplay when player is visible in the page - [ADD] Amazon S3 support with private buckets - [ADD] global playlist data options (add thumb, playback rate, start time, end time for all songs in playlist)
UPDATE 2.05 [24.6.2021]
- [ADD] autoplay fail callback
UPDATE 2.01 [.1.2020]
- [UPDATE] support for folder subdirectories
UPDATE 2.0 [30.1.2020]
- [ADD] added peak batch generator for self hosted audio files (generate peaks from folder of audio files)
UPDATE 1.85 [10.1.2020]
- [UPDATE] sort direction for folder and google drive folder playlist
UPDATE 1.85 [9.1.2020]
- [UPDATE] support for aac from google drive folder
UPDATE 1.81 [5.12.2019]
- [ADD] hide media urls from page source with encryption.
UPDATE 1.8 [23.11.2019]
- [ADD] wav and aac support - [UPDATE] case insensitive search filter
UPDATE 1.71 [10.4.2019]
- [FIX] Edge not playing audio
UPDATE 1.7 [27.9.2018]
- [UPDATE] small code improvements
VERSION 1.67 [17.5.2018]
- [UPDATE] update for serving remote mp3 files from https
VERSION 1.66 [13.5.2018]
- [UPDATE] update for Chrome autoplay
VERSION 1.65 [5.3.2018]
- [UPDATE] reading mp3 files from folder automatically gets ID3 album tags for thumbnails (no longer are image files required in folder)
UPDATE 1.62 [23.2.2018]
- [FIX] fix bug with playback rate
UPDATE 1.61 [2.2.2018]
- [FIX] special characters not showing in data-title
UPDATE 1.6 [23.10.2017]
- [UPDATE] added option for peak file names for self hosted audio - [UPDATE] removed option added in 1.47
UPDATE 1.47 [28.8.2017]
- [UPDATE] share and download links are automatically created from audio path if they dont exist for self hosted audio.
UPDATE 1.45 [24.8.2017]
- [UPDATE] changes to write peak method - [FIX] fixed Soundcloud not setting thumb quality
UPDATE 1.4 [27.6.2017]
- [UPDATE] updated Soundcloud api
UPDATE 1.35 [4.6.2017]
- [UPDATE] new method available for waveform creation (provide image peak manually)
UPDATE 1.31 [25.3.2017]
- [FIX] added mp3 mime types for google drive folder
UPDATE 1.3 [23.3.2017]
- [ADD] new method available for waveform creation (provide peak data array manually) - [UPDATE] updated help file
UPDATE 1.1 [10.1.2017]
- [UPDATE] soundcloud and podcast now sharing direct link
UPDATE 1.1 [8.1.2017]
- [UPDATE] some demo examples updated with social sharing
UPDATE 1.0.8 [12.12.2016]
- [UPDATE] some new api method examples (inputAudio)
UPDATE 1.0.7 [27.11.2016]
- [FIX] fix filter type and usage of m or space bar (useKeyboardNavigationForPlayback)
UPDATE 1.0.5 [25.10.2016]
- [UPDATE] peak directory can now be optionally specified with data-peak-dir
UPDATE 1.0.1 [19.10.2016]
- [UPDATE] updated php peak paths with sourcePath
VERSION 1.0 [16.10.2016]
- first release
Special Thanks and Credits
tags: audio, audio player, mp3, music player, podcast, sharing, soundcloud, streaming, wave, waveform player