Ready to get started?Download WordPress


[resolved] Hello again! :-D (10 posts)

  1. robsantos
    Posted 7 months ago #

    I'm trying to add some pronunciation icons in some posts so people can click on them and the sound is played... everything I find seems to be very complex, so I decided to ask you for a light at the end of the tunnel...

    So the ideia is to put an image and then when someone clicks on it a sound is played... like here http://dictionary.cambridge.org/dictionary/american-english/honor_1?q=honor#
    It can be a word too, when someone clicks on a word the sound is played...

    Thanks agan for your time and attention! <3

  2. robsantos
    Posted 7 months ago #

  3. stephencottontail
    Posted 7 months ago #

    You could try something like this. When you write your posts, every time you'd like a person to be able to hear the pronunciation of a word, write it like this:

    I like <a href="pie.mp3">pie</a>.

    Obviously, you would link to an MP3 file containing the pronunciation. Then, in your stylesheet, put this:

    a[href$=".mp3"]:after {
        content: url( 'path/to/image' );

    That rule means that any hyperlink that links to a file that ends in .mp3 should display your chosen image after it, while leaving other hyperlinks unaffected.

  4. robsantos
    Posted 7 months ago #

    Oh... stephencottontail! :-)
    Thanks for your time!

    I tried... I copied and pasted the code on my CSS stylesheet (I use jetpack, dunno if it makes any difference...) and then I created a test post: http://english-pills.com.br/test/

    But it didnt work... it redirects to the audio page... and there is a broken image... :-(

    I believe I did something wrong!

    Thanks a lot for ur help!

  5. stephencottontail
    Posted 7 months ago #

    Ok, I may have been unclear. In the CSS rule I suggested, you were supposed to substitute the path of the image you wanted to use in place of /path/to/image.

  6. robsantos
    Posted 7 months ago #

    Oh God! :-P

    I really dont know much about codes and stuf, sorry!
    Well I changed... :-)
    Image is OK, but it still redirects to the page where the audio is... is there a way to click and stays on the same page?

    Thanks again!

  7. stephencottontail
    Posted 7 months ago #

    To be honest, I'm not sure how the Cambridge online dictionary does it. Sorry I couldn't be more helpful in that regard, but hopefully someone else will.

  8. You might want to post this question in the general "How To" forum, since the enhancement to your site you're trying to do isn't something specific to the Fictive theme.

    You could also research audio-related plugins and experiment to see if there's one that does what you're looking for:


    Adding a simple audio player below the word might be an easy way to accomplish what you're after.

    I hope this helps point you in the right direction. It sounds like a cool feature for your site and I wish you luck with it!

  9. robsantos
    Posted 7 months ago #

    Oh guys! :-D
    Thank you very very much... stephencottontail you helped me a lot with the things u know and u were undoubtedly helpful :-)

    Kathryn is always helping me too hehehehe... thank you thank you...

    Last night I had an insight and started looking for some "text-to-speech" plugins and I found one that is simply amazing for what I need... It's called "gspeech"... I can define myself what I want to be pronounced or the users can double click the words that are in english or even the sentences and they will be able to hear them <3 And it's simple to use!

    The blog is now "alive" with voice hehehehe... :-)

    Thanks Kathryn for the link, I'll be checking the things there too. It's always good to know a bit more, maybe I can help someone too one day with all these tips! :-D

  10. The blog is now "alive" with voice hehehehe... :-)

    That's awesome! Searching for "text-to-speech" was very clever. :-)


You must log in to post.

About this Theme

About this Topic


No tags yet.