WordPress.org

Ready to get started?Download WordPress

Forums

mb.miniAudioPlayer - an HTML5 audio player for your mp3 files
I'd like a simpler version of the play button (6 posts)

  1. akinom77
    Member
    Posted 12 months ago #

    Hello,

    Thanks for the plugin, one of the few ones that actually works.
    I have couple of questions. I would like to use the styling you have on your site http://pupunzi.com/ on the top right. Just the speaker icon with no background and no play/pause button. I would be able to do it via css but cannot identify the names of the elements to define attributes for. Would you be able to help?

    Also, I am having the same issue as someone else for the symbols on the player buttons appearing as letters instead, in Firefox.

    I have also notices, the autoplay does not work for me on iPad or android smartphone. Is that by design?

    My site page with your plugin is http://www.myklippings.com/sandwich-dover-uk/

    Thanks!

    http://wordpress.org/extend/plugins/wp-miniaudioplayer/

  2. pupunzi
    Member
    Plugin Author

    Posted 12 months ago #

    Hi,

    The player on my site is a custom version of the plugin. Actually the miniAudioPlayer display can't be modified as that one.

    If you have letters instead of symbols that could be due to a CSS issue (one of your CSS class is overwriting the player one) or that the font is not loaded correctly by the site. Be sure that all the "mbaudio_font" are available in the CSS folder and have the correct permission. It seams, for some reasons, that on your site Firefox is not able to load the correct font.

    The autoplay feature is not allowed on any mobile devices by the vendors.

    Bye,
    Matteo

  3. akinom77
    Member
    Posted 12 months ago #

    Hello Matteo,

    Thank you for your feedback, I will look into my css rules.
    Btw, would you know how/where I can find out the names of the elements you are using so I refer to them in my custom css?

    Btw, I am redirecting my site from http://myklippings.com to http://www.myklippings.com/ and had several issues with that in terms of finding paths. They cannot be relative so that might be the problem.

    Monika

  4. pupunzi
    Member
    Plugin Author

    Posted 12 months ago #

    I think that the problem is that the "mbaudio_font" is unreachable on your site from the CSS inclusion.
    On the head of the miniplayer.css file there are two font inclusion:

    @font-face {
      font-family: 'mb_audio_fontRegular';
      src: url('mbAudioFont/mbaudio_font.eot');
      src: local('?'), url('mbAudioFont/mbaudio_font.woff') format('woff'),
      url('mbAudioFont/mbaudio_font.ttf') format('truetype'),
      url('mbAudioFont/mbaudio_font.svg#webfontywr4YLri') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    @font-face {
      font-family: 'DroidSansMonoRegular';
      src: url('DroidSansMono/DroidSansMono.eot');
      src: local('?'), url('DroidSansMono/DroidSansMono.woff') format('woff'),
      url('DroidSansMono/DroidSansMono.ttf')  format('truetype'),
      url('DroidSansMono/DroidSansMono.svg#webfontGzFJ3WpO') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    But for some reason the are not loaded on your site.

  5. akinom77
    Member
    Posted 12 months ago #

    I see the font is in the plug in folder so it's local. How does it get sourced? Where in the style sheet does that define the link to the folder?

    For instance, this is how I source my other fonts, with an absolute link to the folder.

    @font-face {
        font-family: 'tall_filmsregular';
        src: url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.eot');
        src: url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.woff') format('woff'),
             url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.ttf') format('truetype'),
             url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.svg#tall_filmsregular') format('svg');
    }
  6. pupunzi
    Member
    Plugin Author

    Posted 12 months ago #

    CSS files refer to all their inclusions (images, fonts,...) considering themselves and not the page that includes it as start point. That's why paths are relative to the CSS file.

    Anyway you can try changing them with the absolute one and test if it works.
    Bye,
    Matteo

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.