Foliovision

Audio player config

Foliovision › Forums › FV Thoughtful Comments › Requests and Feedback › Audio player config

  • James Y. 10 months, 3 weeks ago

    I am using the player for audio HLS m3u8 stream playback.

    It works great, however, the UI configuration is the Wild West. Why not provide step by step instructions for audio setup?

    For example, I have had to find custom CSS to accomplish some of the UI look I need, however, it is still not as good as it could be. Even with settings like:

    [ ] Removes sharing buttons from top bar.

    I still need to set .fvp-sharing { display: none !important; }

    And in the embed code, I still have to set height:

    [fvplayer src="https://<my s3 stream>" width="640" height="50" share="false"]

    even though I set height here too:
    [ ] Default Video Size: Width: Height: Enter values in pixels or 100%.

    I have these CSS overrides:

    .fvp-sharing { display: none !important; }
.embed-code-toggle { display: none !important; }
.fvp-share-bar { display: none !important; }
.flowplayer .fp-controls { 
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

    Please consider making audio a first-class citizen in the video player world.

    Thanks

Viewing 21 replies - 1 through 21 (of 21 total)
  • Martin 11 months ago

    Hello James,

    I see you are using FV Player 7 and not the latest FV Player 8 version.

    However you shouldn’t be running into such issues.

    It seems that your HLS stream is not properly detected as being audio-only. It’s one of the things which we have improved in FV Player 8.

    Once the stream type is detected to be audio properly, the sharing buttons or embed button does not appear as the player has no picture frame.

    Thanks,
    Martin

    James Y. 11 months ago

    Thank you Martin.

    I’m using the WordPress plugin. There does not seem to be an update:

    FV Player
    Formerly FV WordPress Flowplayer. Supports MP4, HLS, MPEG-DASH, WebM and OGV. Advanced features such as overlay ads or popups. Uses Flowplayer 7.2.12.
    Version 7.5.49.7212 | View details

    FV Player Pro
    Provides Vimeo and YouTube integration, custom video ads, encrypted HLS, AB loop and more for FV Player.
    Version 7.5.50.7212 | By Foliovision | Visit plugin site

    Thank you

    Martin 11 months ago

    Hello James,

    You can upgrade to FV Player 8 by installing via WordPress: https://wordpress.org/plugins/fv-player

    It will deactivate FV Player 7 which you are using automatically and upgrade FV Player Pro to matching version 8.

    Then when adding new HLS streams the type will either be detected properly, or if the check fails you get the checkboxes to choose if it’s Live or Audio stream.

    Thanks,
    Martin

    James Y. 11 months ago

    Hi Martin,

    I am testing v8, and the short code that uses a src attribute is not working: it’s showing UI with a white background, and auto hide on. This does not work:

    [fvplayer src="https://je-audio-stream/stream.m3u8" share="false"]

    What happened to these settings/features:

    • Controlbar Always Visible
    • Removes sharing buttons from top bar
    • Removes the “Link” item to the top bar

    This works as you describe – like an audio player:

    [fvplayer id="2" width="640" height="50" share="false"]

    Thank you

    James Y. 11 months ago

    Also, I am not used to a version update becoming a new plugin, and then you lost all your good reviews, and now there is one 3 of 5, that is not flattering.

    Martin 11 months ago

    Hello James,

    This does not work as FV Player does not know it’s an audio file:

    [fvplayer src="https://je-audio-stream/stream.m3u8" share="false"]

    The HLS stream (.m3u8) is usually a video.

    Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-player-8.zip

    Then you will be able to add type="audio" to the shortcode:

    [fvplayer src="https://je-audio-stream/stream.m3u8" share="false" type="audio"]

    It’s a simple addition which we can include in the next FV Player 8 version.

    The settings related to player interface are now in wp-admin -> FV Player -> Settings -> Skin -> Player Skin -> Controls. These are now simple checkboxes without any additional verb like “remove”:

    • Always Visible
    • Sharing
    • Video Links

    More in our documentation: https://foliovision.com/player/getting-started/customizing-controls

    Thanks,
    Martin

    James Y. 11 months ago

    Thanks, yes, that type tag works with the download you sent to make it an audio player.

    It was hard to find “Controls” in the Player Skin section on the Skin page. Maybe these could look like tabs with a different selected color?

    The preview on the player skin section is white-on-white unless this is toggled, which is probably fine: Always Visible

    The horizontal audio control looks like it would be hard to set on a mobile device due to size. Perhaps the device volume rocker would toggle that.

    Any plans to be able to adjust the player controls’ size and make the player taller? They’re a bit small for an audio player.

    Thank you – very nice work!

    James Y. 11 months ago

    I was also wondering why you have the version number ‘8’ in the name… I suppose there will be a 9, 10, etc.

    James Y. 11 months ago

    Hi Martin, here are a couple other items I noticed in my testing:

    1. The full screen button is not displayed when selected in Controls. On iOS, I believe that full screen keeps the player running and shows it in the Lock Screen, so it seems important.
    2. When the player is narrow, say on a mobile device, there is no audio control.

    I am using the private copy you sent me on my production server.

    Thank you

    no-fullscreen
    no-fullscreen     no-audio
    no-audio
    Martin 11 months ago

    Hello James,

    Thank you for the input, we will go through that in detail.

    1. Please let setup a publicly accessible test page where I can see the issue.

    Of course it does not make sense showing that for audio files, but I see what you mean about the background playback. I wonder if there some other way of achieving that.

    1. We hide the volume control on purpose. On iOS you cannot control the volume from within the browser at all and it takes up the valuable space anyway.

    Thanks,
    Martin

    James Y. 11 months ago

    Here are the settings.

    settings-3
    settings
    James Y. 11 months ago

    Hi Martin,

    1. Here is a test page with the Short Codes using * in place of []

    ( redacted )

    Note the top shortcake keeps getting an AirPlay button added – now I have three showing.

    1. Makes sense.
    Martin 11 months ago

    Hello James,

    1. I was able to play one of your audio tracks and put the phone to sleep. The track continued playing. I could see the player on the lock screen too.

    I could switch to some other app too.

    For videos, the playback stops when you put the phone to sleep or switch apps, but then you can resume the playback using the player controls on the lock screen.

    I used iPhone 11 Pro Max with iOS 18.1.1.

    So it does not appear that the fullscreen button should be added for audio tracks for that purpose.

    1. I can see the bug with the Airplay buttons multiplying. It happens on our website too. We will get it fixed.

    Thanks,
    Martin

    James Y. 11 months ago

    Thank you Martin. And thanks for redacting the URL.

    Martin 11 months ago

    Hello James,

    1. Could you please reinstall FV Player from this link? https://foliovision.com/downloads/fv-player-8.zip

    Then the Airplay button will be added for each player instance on the page properly.

    Thanks,
    Martin

    James Y. 6 months ago

    Hi Martin, I recently started work on this FV Player as an Audio player again, and I have all 3 Mobile settings all switched on. However, the iPhone using Safari does not allow the audio player to continue playing when the Lock Screen goes on.

    According to ChatGPT:
    iOS Safari & Chrome: Apple only allows background/lock-screen playback for media using the native <audio> element or <video> element in certain cases. When FV Player is rendering your HLS .m3u8 stream inside its custom player, iOS suspends it as soon as the screen locks.

    I also played an audio m3u8 stream from the video player, I get the same results, no play in the Lock Screen, so it seems that the native <audio> and <video> elements are not used, event with the Mobile settings? I could not find them.

    Please let me know if there is something I can do to make this work.

    Thank you

    James Y. 6 months ago

    Just to clarify: I could not find the <audio> and <video> tags in the html when I set the 3 Mobile settings to on.

    James Y. 6 months ago

    …I also put the video player configured player into full screen mode, since that will often hold the player open on the Lock Screen, and this did not work either.

    Martin 5 months ago

    Hello James,

    I see that when using a bare <audio> element, it does play in background automatically.

    I was also able to get it to play m3u8 on background that way, even if it had a video stream.

    So I wonder if FV Player could be using the <audio> element for the audio tracks. It would add some complexity, but the background playback would work.

    Or perhaps we could switch the video from using the FV Player interface to use the native iOS player when we detect that the browser is being put into background. I’m not sure if JavaScript would provide such level of control.

    Thanks,
    Martin

    James Y. 5 months ago

    I wrote a player with Claud.ai that plays audio and properly uses the Media Session API to play on the lock screen… let me know if you want the code.

    Martin 4 months ago

    Hello James,

    Could you please try playing any of the audio tracks here? https://foliovision.com/player/demos/mp3-in-fv-player

    The playback on the lock screen works for me. And it also works for any of the videos, except I have to use the player control on the lock screen to resume it.

    I see that we could be using Media Session API to improve its apperance, but this should be already working for you as well.

    Thanks,
    Martin

Viewing 21 replies - 1 through 21 (of 21 total)
Reply To: Audio player config



All materials © 2026 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com