WordPress.org

Support

Support » Plugins and Hacks » mb.miniAudioPlayer - an HTML5 audio player for your mp3 files » I'd like a simpler version of the play button

I'd like a simpler version of the play button

  • 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/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author pupunzi

    @pupunzi

    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

    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

    Plugin Author pupunzi

    @pupunzi

    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.

    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');
    }

    Plugin Author pupunzi

    @pupunzi

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘I'd like a simpler version of the play button’ is closed to new replies.
Skip to toolbar