Okay
  Public Ticket #2406674
MP3s loading fully on page & Waveform limitations - Optimization & usability Questions
Closed

Comments

  • Andrew John Scudder started the conversation

    Hey Guys,
    Need a little help! I bought this a while ago but had to scrap using it cause of some issues with how it functions.

    Can someone explain how the Audio MP3s are being "called" from backend to frontend? or is there documentation on what's really happening in the code? is it using the WP steam capabilities... is it all Ajax loaded? Are the waveforms Ajax loadable just by themselves and called via a shortcode??? Are there shortcodes that enables me to build and style the specific elements and functions that I need from your plugin?

    My need:

    I need to have the waveform isolated, where the MP3 files are not loaded on the page until its activated/triggered so .. Streamed. 

    In the Elementor widget you can't really Utilize all the independent elements that you assembled (at least for my requirements.) Specifically the waveform the play/stop button. All I can do is "Hide Mini Player / Soundwave" as a bundled element. I need that isolated

    IE: I want to make a button with a play icon tied to a specific audio file. When clicked a waveform pops up and starts playing all in side of my button. Or a button with a waveform and when hovered it show the Play Icon etc... 

    but when i tried to build this I got somewhat close to this and ran into some limitations that cause the page be bloated with pointless MBs.

    The limitation Situation:

    The way I want to use this plugin is as a Sample Demo aera. I have a total of 40  unique demos and I want to show the waveforms for each and a hoverable play icon over top the waveform,  when I used your plugin it made my page size like 60MB cause it loaded all the 40 MP3s.

    on initial load of the page I cannot display the waveform as a "static asset/element" and "stream" the MP3 once clicked. The Waveform generation with this plugin forces you to load the MP3 file fully via the local server also the External?

    I had to scrap the whole plugin cause I couldn't get it to not load the mp3s and only load the Waveforms.

    Again I could be missing a setting that makes the audio not load and forces it to "stream' when clicked but I dont know.

    Is there a work around to hide the waveform and then show the waveform on demand without loading the MP3s and vice versa??

    Correct me if i'm wrong but this is how it functions. 

    Load the page, it Loads the MP3s internal/external fully then renders the waveform in real time via ajax? 

    Could that be for just the waveform. Load the wave form and then when clicked it loads the MP3?

    I could keep going on and on but basically I want to hear more about how this plugin is built and what are ways we could make it more optimized for a user like me that couldn't use it out of the box. I would love to use this plugin/ think it needs a few more tweaks for the usability at least for me

    Sorry if this sounds repetitive... was kinda fluid thoughts 

    Thanks, 
    ANDREW

  •  1,103
    Max replied

    Hi,

    we have fixed a lot of issues 2 weeks ago. Make sure to update to version 2.0 both free and pro plugin

    see changelog here: 

    ----------------------------------------------
    V.2.0 - 2020-05-07
    ----------------------------------------------
    - New! You can upload audio tracks from any posts, custom posts, or pages! Enable media uploads for your post types in WP-Admin > MP3 Player > Settings. Before this update, you had to create a playlist, upload your tracks and then embed the playlist widget or shortcode on the posts you wanted to display the player. Now simply edit any post, upload tracks and add the player widget, all at once. See quick video here: https://d.pr/v/l2NKHa
    - New! We now fully support long audio tracks and streaming files. The player used to crash on mobile or not display waveforms when using heavy mp3 files. We have added a new waveform skin called Synthetic Waveform in WP-Admin > MP3 Player > Settings
    - New! Waveform display intanstanly without lag time. Make sure to select Synthetic Waveform in WP-Admin > MP3 Player > Settings.
    - New! SEO improvement: You can now control the playlist and soundwave title HTML tag and specifiy which heading to use. 
    - Improved: MP3 is not being preloaded anymore if you are not displaying the waveform
    - Improved: Condition logics for the setting panel
    - Improved: Added query strings for the CSS and JS files to avoid cache issues when updating
    - Improved: Minor UI work on the settings page
    - Fix: When no playlist/album is specified in the shortcode, try to play the current post tracklist
    - Fix: Condition JS library for better Gutenburg support
    - Fix: Issue with font loading in some case
    - Fix: Color pickers now display correctly
    - Fix: No more 404 page not found on the Playlist custom posts.
    - Fix: Featured Album was disable on some theme that don't support featured image
    - Fix: Issue with UTF8 character encoding in sticky player
    - Fix: Issue with sticky typography color not applied on the sticky player



    For the example your are asking: "IE: I want to make a button with a play icon tied to a specific audio file. When clicked a waveform pops up and starts playing all in side of my button. Or a button with a waveform and when hovered it show the Play Icon etc... "

    This is not possible im afraid as its a bit custom.....Im confused where you see something like this on our demo page?

    What you do is to load the sticky audio player when a Elementor button widget is clicked. see screenshot: https://d.pr/i/tbvVUT

    Anyway, the issue with the mp3 loading when not listening to it is fixed in the last update.

    Thanks,


    Max from the Sonaar.io Crew