Template talk:Listen

Eww

Can I just say, no offense to whoever created it, that this is the ugliest web player I've ever seen. I understand it was coded in java, and java's not exactly visually pleasing, but seriously, can someone give this a decent skin? I just noticed the in-line version, and I gotta say, it looks awful (FF 2.0.0.6, on WinXP running Luna). The faux-WMP11 blue play button looks odd and out-of-place against the off-white oblong button. I say we don't use a picture, and instead just a text (black) play arrow. Also, the onclick takes forever to load, and I'm wondering if there's a faster way possible. -Mysekurity 02:52, 11 September 2007 (UTC)

It's not controlled by this template. — Omegatron 04:01, 12 September 2007 (UTC)

Right, it's controlled by div class="medialist listenlist". Should I bring it up with a dev, or just shut my trap? I thought I'd mention it here because I saw it used on this template (I don't know of a WhatLinksHere equivalent for div classes). -Mysekurity 05:11, 12 September 2007 (UTC)

I believe User:Gmaxwell set it up. If you have constructive criticism/input, you could contact him about it.--Pharos 05:42, 12 September 2007 (UTC)

I have to agree with Mysekurity - this player/template is deseprately in need of a face lift. Also, template:multi-listen item is even worse -- see Ludwig van Beethoven#Media. Can someone please look into this? Raul654 21:25, 14 September 2007 (UTC)

Agreed. Honestly, what was wrong with it before? No disrespect to whoever created the new version, but it looks awful. PC78 14:46, 15 September 2007 (UTC)

It's important, in this case, to distinguish form from function. The new version is a significant improvement in a technical sense - mediawiki now natively supports ogg playback. It's just that the player is fugly - the interface needs work. Raul654 15:33, 15 September 2007 (UTC)

It kind-of reminds me of YouTube or other flash-embedded websites. I agree it's a much greater technical advancement, but why code it in Java? It would seem to me that most non-techies and public workstations wouldn't have Java installed, and the framework as a whole runs sluggishly. I also see that there's a switch for video. I wonder how that would work out... -Mysekurity 07:00, 16 September 2007 (UTC)

None of the comments above appear to be actionable to me, "this is the ugliest web player I've ever seen" just isn't something I can go and fix. Shall I just go replace the appearance with something else that you'll hate? The code is linked from here, patches are welcome. For whatever it's worth, I didn't create this UI... Tim Starling reimplemented the approach I used in our popup player as a mediawiki extension.

In any case, Java has little to nothing to do with the appearance. The player supports a half dozen playback methods, Java being just one of the options. Most of the appearance is pure HTML (everything except the pause/slider/time display in java mode) which is provided by the javascript (which has nothing to do with java) included in the extension. I am, personally, not keen on inline players but inline playback was a widely demanded feature.

If someone with HTML,CSS, and at least a little JS expirence is really interested in working on this I'd be glad to throw up a test site and give you access to change the player. --Gmaxwell 19:41, 16 September 2007 (UTC)

I can't speak to all issues, but one obvious problem that should be easily solved is that in the Beethoven media section, it's difficult to tell where one item stops and the next one begins. That is to say, it's not clear whether the descrtiptions match the item above or below (it's above). Raul654 19:46, 16 September 2007 (UTC)

Hey, I'm good with those, throw me a line if you want me, I'm only 1/4 done with a book on JavaScript, so it's only patchy there, but I'll try. I don't exactly know what you want though, to me it looks fine.Yamakiri 20:07, 16 September 2007 (UTC)

That is assuming JS is JavaScript, CSS is Cascading Style Sheets, and HTML stands for Hyper Text Markup Language. Yamakiri 20:28, 16 September 2007 (UTC)

Where is the width set?

I'm trying to make a linearised version of this template as currently the button squeezes the title out and is very ugly. Here is the work in progress and it works reasonably well (without any table used) except that it's now 100% width instead of the set width in the current version. I cannot track down where is the width set in the current; neither .medialist nor .listenlist set a width in the CSS so where is the width set in the current version? PS: Why is the template unprotected? --antilived^{T | C | G} 10:22, 4 October 2007 (UTC)

Looks much better than the current incarnation, and doesn't disrupt text so much. Keep it up. Rehevkor 14:40, 9 October 2007 (UTC)

Umm but the current version is almost exactly the same as my version (I changed it), except for the description font-size and the fixed width. --antilived^{T | C | G} 04:04, 10 October 2007 (UTC)

That's why I like it. Although I've discovered you can set the width of the current listen template. Rehevkor 17:44, 8 November 2007 (UTC)

Help text size

{{editprotected}} I'm not sure if this has been brought up before but is there a reason the text "Problems listening to the file? See media help" has to be so large? It, and the whitespace it produces, practically double the size of the box. See The X-Files#Early production issues. A single line of normally-sized or even small italics text seems sufficient. Thanks. Equazcion •✗/C • 12:51, 9 Jan 2008 (UTC)

I don't see this; I have only a reasonable amount of white space? Can you take a screenshot? What browser are you using? — Carl (CBM · talk) 01:52, 13 January 2008 (UTC)

Whitespace/formatting, again

This template still causes a whitespace/formatting roblem. It would be nice if one could insert it so that text appears to its right. "br clear" can be manually done if needed. But we're having many bird-calls these days, and many bird stubs, and there it looks just gross. Dysmorodrepanis (talk) 12:18, 10 January 2008 (UTC)

I agree this should be done. But for now you can use {{Sound sample box align left|Sound sample:}} before a {{listen}} and a {{sample box end}} after it, which will make text wrap to the right. Equazcion •✗/C • 14:30, 10 Jan 2008 (UTC)

Ah good, this works as needed. But another problem exists - see Bobwhite Quail. It would be nice if the media player could be placed under the text (to the right of the image), but I have no idea if that is at all possible. Dysmorodrepanis (talk) 08:02, 9 February 2008 (UTC)

Fi.Wiki help

Hi, I'veen trying to add this Listen template to Finnish Wikipedia (see: fi:Malline:Kuuntele). I've gotten pretty far with it but what I don't understand is how get the gnome speaker icon appear on it as a decoration? The code is the same as here and I read through the CSS version discussion above but that did not really help. Do I need to add some code to Commons or what? Thanks. --Azure Shrieker (talk) 23:49, 17 February 2008 (UTC)

You'll need to get an admin to add the following code to fi:Järjestelmäviesti:Common.css:

div.listenlist {
    background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/30px-Gnome-speakernotes.png");
    padding-left: 40px;
}

/* Style rules for media list templates */
div.medialist {
    min-height: 50px;
    margin: 1em;
    background-position: top left;
    background-repeat: no-repeat;

div.medialist ul {
    list-style-type: none; 
    list-style-image: none;
    margin: 0;
}
 
div.medialist ul li {
    padding-bottom: 0.5em;
}
 
div.medialist ul li li {
    font-size: 91%;
    padding-bottom: 0;
}

Tra (Talk) 16:45, 18 February 2008 (UTC)

Hey, it worked. Thanks! --Azure Shrieker (talk) 19:28, 19 February 2008 (UTC)

Draft

This is a preview of a proposed edit. My aim is mainly to reduce the footprint of the help text, as well as to keep the description from wrapping to new lines. Since this template is meant to be displayed as a block, ie. take up entire horizontal lines despite the amount of width actually required, I think it would be better to actually use that lateral space rather than create new lines and waste even more space. The following displays well on my system, so please give feedback on your displays and on the idea. The draft code is at Template talk:Listen/draft. Feel free to tweak it etc. Equazcion •✗/C • 06:53, 27 Feb 2008 (UTC)

---

Accordion chords

Chords being played on an accordion — 145 KB
Problems listening to the file? See media help.

---

For comparison, here's how the old version displays:

---

Accordion chords

Chords being played on an accordion — 145 KB

Problems listening to the file? See media help.

---

Since no one seems to object, I've made the edit. Feel free to express any concerns here. Thanks. Equazcion •✗/C • 10:06, 22 Mar 2008 (UTC)

I had to make a few extra tweaks in order to keep those "sound sample box align" templates aligned correctly, most notably with respect to the "nowrap" I was planning on implementing. Couldn't do that in the end. I also reduced the the help text further as you can see (I think the help text should be at least smaller than the filename/description text). Eventually I think we need to combine "Listen" and "Sound sample box align", because no one really uses one without the other -- the "align" templates are really just a quick-fix for problems in this template. Done making edits to this for now, let me know if there's any trouble. Thanks again. Equazcion •✗/C • 10:38, 22 Mar 2008 (UTC)

Interlanguage link on wrong page

{{editprotected}}

There's a lv:Veidne:Listen interlang link on the main template page. This should be in /doc. I've added it there, but it needs to be removed from the template code itself. Chris Cunningham (not at work) - talk 13:08, 13 July 2008 (UTC)

Done. Cheers. --MZMcBride (talk) 18:57, 13 July 2008 (UTC)

Are there any options to make Template:Listen smaller?

There are a lot of music pages, such as augmented sixth chord, that could really benefit from a version of Template:Listen that could be used inline. For a lot of examples, we have to make do with Template:Audio, which is not as utilitarian, but much less cumbersome than Template:Listen. For example:

The Italian sixth moving to V.

The Italian sixth moving to V.

Is there anyway to change the size of the icon and the width of the "play-bar", for instance? Thanks. --Blehfu (talk) 03:54, 30 July 2008 (UTC)

The image used is currently set to a width of 180px, presumably for visibility. Hyacinth (talk) 04:29, 30 July 2008 (UTC)

request right align parameter

Is it possible to add a parameter to the template so that the result can be right aligned to improve article text flow where needed? — MrDolomite • Talk 02:22, 11 August 2008 (UTC)

I second this. I was working on an article recently where I had to use the music sample box to align it to the right. Having the parameter in the {{listen}} syntax would be so much easier. Thanks in advance! Utan Vax (talk) 18:20, 20 August 2008 (UTC)

Updating

I propose the following modifications:

1. Convert to use 'navbox' or 'infobox' styles to fix padding, positioning, etc
2. Use an imagemap or direct image rather than that nasty background-image that can't be clicked on
3. include an 'inline' option that rejigs it as an inline template, to hopefully allow us to merge several of these similar templates

Obviously some care is going to be required to ensure that none of these changes are breaking, but I think the results will be worth it. Thoughts? Happy‑melon 09:53, 25 October 2008 (UTC)

I've made a start to this at Template:Listen/sandbox. That the kind of thing you're looking for? (I should point out that this would be a reverse of a previous decision.) Chris Cunningham (not at work) - talk 11:57, 25 October 2008 (UTC)

I'm surprised that that decision ever went through; it's produced a horribly unprofessional template that aligns incredibly poorly and usually has to be wrapped in divs to position it correctly. The non-clickable image is counter to our policies and may even have GFDL issues (I don't agree with that argument myself, but there's no question that it exists); the use of bespoke styles rather than CSS bulks up MediaWiki:Common.css and doesn't have the majority of the last two years-worth of CSS fixes we've developed. All in all I think a redesign is urgently needed. I like what you've done at {{Listen/sandbox}}, although I was planning on using the navbox styles rather than the infobox ones. It doesn't make a huge amount of difference. In fact, the entire audio-template collection desperately needs overhauling and probably consolidating: most of the templates in Category:Audio templates could easily be combined into one properly-designed one. Happy‑melon 13:30, 25 October 2008 (UTC)

Yeah, I'm all for consolidation of other templates. Let's get something which works first and then we can discuss the exactly styling / classes to use. Chris Cunningham (not at work) - talk 14:28, 25 October 2008 (UTC)

Looking at the current work - I don't think it's a good idea to include all the logic for inline audio here. Inline is usually handled by a separate template, and it makes for simpler code (and testing) in this case. Chris Cunningham (not at work) - talk 12:33, 26 October 2008 (UTC)

Ok, I've developed and implemented a nice version that can handle multiple files, noplay settings and various other bits and pieces. This completely deprecates {{multi-listen-item}} etc, {{sound}}, {{Sound sample box align left}}/right/mini, {{sample box}} and god knows how many others from Category:Audio templates. There's an awful lot of work to to here, firstly making sure that all the instances of {{listen}} look ok (the default position has switched to the right, which will probably have broken a lot of places), B) removing all the horrible wrapper templates that are floating around, and C) merging the deprecated templates into this one. But we can eventually get a sensible system together here. Happy‑melon 00:20, 24 November 2008 (UTC)

• I think its great, much easier to understand and apply. I wonder though, will there be a bot to fix/update all the uses of the old audio templates? (because it seems those boxes got messed up when depracating). Thanks for all the hard work. ♫ Cricket02 (talk) 02:30, 25 November 2008 (UTC)

Might need more work? Please see here. The descriptions are a bit garbled it seems (using IE) but was fine yesterday. ♫ Cricket02 (talk) 18:16, 25 November 2008 (UTC)

Looks fine to me. Can you be more explicit about the problem? Happy‑melon 19:16, 25 November 2008 (UTC)

The bottom line of each each description is kind of crunched up into the previous line. Mabye it is just in IE. ♫ Cricket02 (talk) 03:55, 26 November 2008 (UTC)

option for right side of page?

I was looking at a page that uses this template and I think it would look better if the lsiten text was at the right hand side of the page instead of the left. Would it be possible to make this an option? RJFJR (talk) 21:25, 23 November 2008 (UTC)

That's the plan. I'm about to ping Happy-melon and ask him to move the new code over. Chris Cunningham (not at work) - talk 21:41, 23 November 2008 (UTC)

Header

Can there be an option for providing a header at the top of the box? The existing template {{Sample box start|Album title}} would add "Audio samples of Album title" to the top of the audio samples box. --JD554 (talk) 09:22, 25 November 2008 (UTC)

 Done |header= Happy‑melon 14:33, 25 November 2008 (UTC)

Style fixes and proposed alterations

{{editprotected}}

There is one problem with using the CSS classes for this template; the navbox class clears left and right by default, which prevents the template from being floated left next to, for example, an infobox. The fix isn't hard, adding an explicit clear:left; and clear:right; solve it, I have checked it in the sandbox (my second edit, after synchronising with the main template) and will include some examples below. If this, or any other, viable solution can be applied it would help a lot. Thanks – Ikara ^talk → 04:22, 28 November 2008 (UTC)

Proposed changes

While I'm posting anyway there are a couple of stylistic changes I would like to propose to the template. These are not part of the {{editprotected}} request above. I have already put them in the sandbox for demonstration purpose, and they break down to two things. Firstly I feel that the top margin is too large, it looks huge when the template is floated left. Secondly, the message at the bottom is taking up more space than necessary, it would look better if it and the rule above it spanned the table. Here are some examples:

Template examples

The updated template allows the template to display with itself or any other table on the opposite side of the page like this. By separating the help message in this way it also draws a clearer distinction between it and the audio samples.

However the old template is forced below any other templates on the opposite side of the page. Notice that the message at the bottom takes up more space vertically than the proposed template. The margin between this and other templates is also excessive.

There is now way this template needs to appear down here, it takes up far more room, and there is plenty of horizontal clearance between the left and right. Even if there were not, editors could easily use {{-}} to clear the margins. I have reduced it to 0.5em, but 1.0em would be a reasonable compromise.

Hopefully that will convince you that my suggestions are worthwhile. I leave the stylistic changes open to discussion, they aren't entirely uncontroversial and so I cannot expect them to be changed without some consensus first. I would be happy to see any (or all) of these suggestions implemented, I feel they would improve the template considerably. All the best – Ikara ^talk → 04:22, 28 November 2008 (UTC)

I agree with your proposal, but let's revisit using navbox for the base class in the first place. This isn't a navigation template - it's an information template. What's the reason for using navbox over infobox (which would resolve the stacking issues automatically)? Chris Cunningham (not at work) - talk 08:33, 28 November 2008 (UTC)

Actually the infobox class clears the right margin by default, so it is still necessary to explicitly set clear:left; for the template when it is floated left. However it is more correct than the navbox class at any rate, so I have updated the sandbox template to use it – Ikara ^talk → 17:22, 28 November 2008 (UTC)

I've made the clear: updates required. I'm working on a more effective fix for the whole making-a-pretty-right-floating-box issue which should mean we don't need to use infobox or navbox, neither of which are particularly applicable. Watch this space (and poke me if I seem to have forgottne it!) :D Happy‑melon 17:37, 28 November 2008 (UTC)

General Question/complaint

Out of curiosity, why exactly was the template changed from the first ones? Was there a defect? Additionally, is there a bot capable of updating the many malformed pages caused by switching of the templates? I've been doing some manually, but it's a tedious undertaking. Orane (talk) 03:11, 5 December 2008 (UTC)

The template was poorly floated, used deprecated url background images instead of inline images, had bizzarre text styles, was unskinnable, overlapped with right-floating infoboxes etc in most browsers, was poorly coded and had a few other things wrong with it that I can't remember off the top of my head :D. I can't run bot scripts from this location but I'll be trying to get something together when I get back in a week or so. Happy‑melon 08:58, 5 December 2008 (UTC)

More audio types

I think that 'sound' and 'music' are too broad to describe audio. I suggest making human speech distant from the other types of audio, thus:

• music - singing/instrumental music/opera
• sound - sound effect/bird call/ambiance//misc.
• speech/phrase/spoken/voice - a person speaking in some human language (quote, speech, comments, etc.)

  Suggested icons: File:WLS.jpg

I'm having trouble branching out from just that. Animal calls might be a good area to branch out as animal wikiprojects could use it. But what would we exactly classify whale songs as? — Dispenser 23:45, 27 December 2008 (UTC)

I agree with having more types, particularly one for 'speech'. I like the second icon! Happy‑melon 11:10, 28 December 2008 (UTC)

Increasing the file limit

Is there any chance of increasing the limit of the number of files that can be used? Twenty would probably be a safe limit for most purposes. For examples where this could be needed, see list of compositions by Johann Sebastian Bach and Domenico Scarlatti. I'm acutely aware of template limits. I'm glad this template has been updated and is now more flexible, so people will be more willing to use it. Graham87 02:39, 29 December 2008 (UTC)

I've increased it to ten. There are no fundamental problems with increasing it further, it's just a question of taste. Given that this is really designed to inline music samples around prose, I suspect that it will get unwieldy with too many files. For larger collections you'd probably need to columnise the samples anyway, so using {{listen|plain=yes|...}} inside a 3-column table would probably be your best bet. Thoughts? Happy‑melon 11:09, 29 December 2008 (UTC)

Whatever layout looks best ... I don't know because, as it says on my user page, I'm blind. IIRC, some of the large lists of sound files use templates such as {{Colbegin}} and {{colend}} for formatting. They don't impact accessibility as far as I know. As an aside, it would be nice if your bot would automatically add "|play=no" to midi files, like at Johann Jacob Froberger. Graham87 15:50, 29 December 2008 (UTC)

Increase default size a bit

Seems to be a bit small. 220px might be alright. -Stevertigo 02:28, 12 February 2009 (UTC)

Media help link should open a new tab/window

A popup would be preferable, but a new window would be fine. On the user end, FF can direct new windows to open in a new tab instead. -Stevertigo 02:28, 12 February 2009 (UTC)

I don't think that's a good approach. Users are able to specify that links open in new windows if they wish; we shouldn't be making that choice for them. Chris Cunningham (not at work) - talk 09:39, 12 February 2009 (UTC)

You must be talking about the setting in user preferences. That setting appears to apply only to external links, and not to internal wiki links. My comment still stands. -Stevertigo 08:06, 13 February 2009 (UTC)

Actually, no; I was talking about the ability of every modern Web browser to allow the user to open links in new tabs or windows as they please. I'm pretty sure Nielsen specifically discourages forced new windows in almost all cases. Chris Cunningham (not at work) - talk 09:03, 13 February 2009 (UTC)

Stop button

Would be nice. [Show] "still image only" link seems to work well; adding "(Stop)" would make this usage more explicit. -Stevertigo 02:31, 12 February 2009 (UTC)

Sound Icon

It would nice to be able to set the type parameter to remove the large sound icon on the left. The icon is unnecessary and it makes the box wide and intrusive. Without it the box would fit nicely to 180px, the same as aligned images. Karpouzi (talk) 11:55, 26 February 2009 (UTC)

Add Spanish Wikipedia link

Hi all!! Can someone add a link to this template in the Spanish Wikipedia, please? The interwiki is es:Plantilla:Sonido. Thanks!! --Obelix83 (talk) 19:18, 20 March 2009 (UTC)

Done. You could have done it yourself by editing Template:Listen/doc though. Graham87 23:14, 20 March 2009 (UTC)

Left float

I'm either confused or I don't understand the concept of "left floating" or there is a bug in this template's (or more likely in {{Side box}}'s) behaviour. I can't make the text flow around the box if the box is positioned left. Michael Bednarek (talk) 05:21, 29 April 2009 (UTC)

 Fixed Happy‑melon 07:53, 29 April 2009 (UTC)

Cool, thank you. ♫ Cricket02 (talk) 12:14, 29 April 2009 (UTC)

plain prevents "float:right"

Thank you very much for the above, Happy-melon. Another behaviour I don't understand is that the parameter "plain=yes" seems to prevent the "float:right" default behaviour. The code for the 1st box is: {{Listen|plain=yes|filename= … and so it should default to "float:right". I figured out that this can be overcome by using "style=float:right" (used in box 2), but I don't think that should be necessary. Michael Bednarek (talk) 05:26, 30 April 2009 (UTC)