Page MenuHomePhabricator

Add button to play recorded audio pronunciation of the article.
Closed, ResolvedPublic3 Estimated Story Points

Description

Add a button (e.g. to the right of the page title overlaying the lead image) to play the audio recording of the page title (if available).

Behavior

  • Show button with audio icon inline with title in lead image area (don't show the icon if the pronunciation clip is not available) (and we're assuming that this will only be available if we're using the Content Service for fetching the page)
  • When the button is tapped, play the audio clip in the background. No pause/resume controls are necessary, since these are likely to be very short clips. Nevertheless, we should make sure to stop the audio playback if the user navigates away from the current page (or exits the app).

map and pronounce-b-04.png (1×770 px, 767 KB)

The icon is called "volume up" in the Material icon set:
https://www.google.com/design/icons/#ic_volume_up

Event Timeline

Dbrant raised the priority of this task from to Needs Triage.
Dbrant updated the task description. (Show Details)
Dbrant moved this task to Product Backlog on the Wikipedia-Android-App-Backlog board.
Dbrant subscribed.
Dbrant triaged this task as Medium priority.Oct 7 2015, 2:03 PM
Dbrant added subscribers: Nirzar, KHammerstein.

@Dbrant
Whats the standard way that android will play these audio files? Or do we need to implement a player?

@KHammerstein
That's a good-looking mockup! One question, though: how will it actually appear when the article has disambiguation links and/or issues? I'm kind of worried that we'd be pushing the lead section down more (thus exposing less of the article text), when we've worked so hard to make sure that the text is at the very top. Would it be possible to use more of the lead image real estate to contain these buttons?

Regarding audio playback:

  • For the pronunciation of the title, since it's a relatively short sound clip, I think it's OK to just play the audio ourselves in the background, with no controls.
  • For the spoken version of the article, I also think it's OK to bounce the user to an external player app, and allow it to play the file. That way we wouldn't have to implement our own playback controls.

@KHammerstein
Actually, this particular task is only for the pronunciation of the article title. And since this only involves adding the "speaker" icon next to the lead text, we can consider this task ready for development. Let's split off the discussion about the "listen to article" and "open in maps" buttons into their respective tasks, which are T114525 and T114523.

Dbrant edited a custom field.

Change 249325 had a related patch set uploaded (by Niedzielski):
Add pronunciation icon lead image logic

https://gerrit.wikimedia.org/r/249325

Change 250448 had a related patch set uploaded (by Niedzielski):
Add pronunciation span click listener logic

https://gerrit.wikimedia.org/r/250448

Change 250903 had a related patch set uploaded (by Niedzielski):
Add pronounciation media player logic

https://gerrit.wikimedia.org/r/250903

Change 249325 merged by jenkins-bot:
Add pronunciation icon lead image logic

https://gerrit.wikimedia.org/r/249325

Change 250448 merged by jenkins-bot:
Add pronunciation span click listener logic

https://gerrit.wikimedia.org/r/250448

Change 250903 merged by jenkins-bot:
Add pronounciation media player logic

https://gerrit.wikimedia.org/r/250903

Change 252367 had a related patch set uploaded (by Niedzielski):
Add article title pronunciations

https://gerrit.wikimedia.org/r/252367

Change 252367 merged by jenkins-bot:
Add article title pronunciations

https://gerrit.wikimedia.org/r/252367

Checked with 2.1.134-alpha-2015-11-20 on Nexus 5 (Android 5.1.1)

A little bit of low contrast against a white background?

Screenshot_2015-11-20-12-34-26.png (1×1 px, 290 KB)

Screenshot_2015-11-20-12-55-29.png (1×1 px, 373 KB)

Screenshot_2015-11-20-12-55-43.png (1×1 px, 359 KB)

@Niedzielski Can you decrease icon size by about 60% and make sure its vertically centered with title?

@Etonkovidova The icon could also be black on white backgrounds along with title and descrip! T118984

@KHammerstein, ok I think I have it... I've only made the icon about 33% smaller. It looked so tiny at 60% smaller that it wasn't really recognizable as a button! Let me know what you think. It'll be easy to go down another 30% if you want it. It looks big in the screenshots but is tiny IRL.

https://veuwer.com/i/3e7s,3e7t

Change 255057 had a related patch set uploaded (by Niedzielski):
Tweak title pronunciation icon appearance

https://gerrit.wikimedia.org/r/255057

Change 255057 abandoned by Niedzielski:
Tweak title pronunciation icon appearance

Reason:
To be continued...

https://gerrit.wikimedia.org/r/255057

Change 255057 restored by Niedzielski:
Tweak title pronunciation icon appearance

https://gerrit.wikimedia.org/r/255057

Change 255057 merged by jenkins-bot:
Tweak title pronunciation icon appearance

https://gerrit.wikimedia.org/r/255057