Audio files with Japanese file names don't play in Firefox

Question

I have a list of vocabulary (ex. http://nihongoup.com/vocabulary/animals/) where each word is associated with an audio file whose name is composed of the kanji for the word (first column in the list) and it's reading in hiragana (second column). For example, the audio file for 動物 is called 動物_どうぶつ (mp3 and wav).

Audio button code:

<span onclick="playAudio('/files/audio/words/動物_どうぶつ');" class="btn-audio"></span>

JavaScript that embeds the audio file:

var audioEmbed = null;
function playAudio(which)
{
    if (audioEmbed)
    {
        document.body.removeChild(audioEmbed);
        audioEmbed.removed = true;
        audioEmbed = null;
    }  
    audioEmbed = document.createElement("audio");
    var mp3Embed = document.createElement("source");  
    mp3Embed.setAttribute("src", which + ".mp3");
    mp3Embed.setAttribute("type", "audio/mpeg");
    audioEmbed.appendChild(mp3Embed); 
    var wavEmbed = document.createElement("source");  
    wavEmbed.setAttribute("src", which + ".wav");
    wavEmbed.setAttribute("type", "audio/x-wav");
    audioEmbed.appendChild(wavEmbed); 
    audioEmbed.setAttribute("autoplay", true);
    audioEmbed.removed = false;
    document.body.appendChild(audioEmbed);
}

For some reason, the audio plays fine in all browsers except Firefox. If I change the name of the files to something written in Latin characters, the sound plays fine too. Is this a bug in Firefox and is there any way of solving this problem? Thanks!

When I try to load the url for one of your audio files directly (or what I think is the url) I get an HTML "pricing" page. What's the playAudio function actually doing with the string? What are the actual URLs to the audio files? — Boris Zbarsky, May 12 '11 at 19:23
I'm sorry... I updated my question with examples of the code. — Philip Seyfi, May 13 '11 at 09:15
`動物_どうぶつ` is [not a valid URL](http://stackoverflow.com/questions/2742852/unicode-characters-in-urls). Have you tried percent-encoding the characters? — Pekka, May 13 '11 at 09:16
I just tried encoding the URL but that did not solve the problem :( — Philip Seyfi, May 13 '11 at 09:23
@Philip: did you use `escape` or `encodeURIComponent`? The former will not work properly on non-ascii characters. — Andy E, May 13 '11 at 09:27
Worth a read: http://stackoverflow.com/questions/1794637/url-escaping-chinese-japanese-unicode-characters-for-internet-explorer — Andy E, May 13 '11 at 09:46

score 3 · Accepted Answer · answered May 13 '11 at 16:44

3

It looks like these WAV files are encoded as 24-bit mono PCM. Firefox's WAV decoder only supports 8-bit and 16-bit PCM encodings, so it can't play these files. See https://bugzilla.mozilla.org/show_bug.cgi?id=524109

That should be unrelated to the filename; perhaps the Latin filename you tested pointed to a WAV file with a different encoding?

The "simple" solution is to convert all the WAV files involved to 16-bit PCM...

answered May 13 '11 at 16:44

Boris Zbarsky

34,758
5
52
55

Thanks a lot! That was indeed the problem :) – Philip Seyfi May 13 '11 at 17:55

score 1 · Answer 2 · edited May 13 '11 at 09:39

1

Try the JavaScript function encodeURI(), eg:

    var mp3Embed = document.createElement("source");  
    mp3Embed.setAttribute("src", encodeURI(which + ".mp3"));

edited May 13 '11 at 09:39

Andy E

338,112
86
474
445

answered May 13 '11 at 09:19

Karl-Bjørnar Øie

5,554
1
24
30

`encodeURIComponent` should be used, `escape` was deprecated because it doesn't work with non-ascii characters. – Andy E May 13 '11 at 09:26
Unfortunately that did not help. FireFox is still silent :( – Philip Seyfi May 13 '11 at 09:28
1

You have set the HTML document's encoding? If it's not set, the DOM model might be defaulting to latin-1. – Karl-Bjørnar Øie May 13 '11 at 09:30
And for some reason, if I use encodeURIComponent (e.g., `wavEmbed.setAttribute("src", encodeURIComponent(which + ".wav"));`) it stops working in Opera too. – Philip Seyfi May 13 '11 at 09:31
@Philip: Sorry, after taking another look at your code, it's `encodeURI` you want :-) `encodeURIComponent` will encode the path separators `/` in your URL. Serves me right for skim reading questions! – Andy E May 13 '11 at 09:31
as for encoding... I have: `` – Philip Seyfi May 13 '11 at 09:36
Japanese is Shift_JIS, not utf-8 I think – Karl-Bjørnar Øie May 13 '11 at 09:37
@zeropage: utf-8 is fine for Japanese. I've updated your answer to fix my earlier mistake and upvoted +1 :-) – Andy E May 13 '11 at 09:39
@zeropage: Japanese is included in UTF-8 – Philip Seyfi May 13 '11 at 09:40
I just tried encodeURI and it too breaks it in all browsers :/ – Philip Seyfi May 13 '11 at 09:40
Yes, but if the input is in shift_jis, will they be correct inside utf-8? – Karl-Bjørnar Øie May 13 '11 at 09:41
@Philip: really? It's strange that `encodeURI` breaks it for all browsers but `encodeURIComponent` doesn't, considering the latter encodes the path separators. – Andy E May 13 '11 at 09:43
Both break it in all browsers... I've tried both `wavEmbed.setAttribute("src", encodeURIComponent(which + ".wav"));` and `wavEmbed.setAttribute("src", encodeURI(which + ".wav"));` and neither works as expected :( – Philip Seyfi May 13 '11 at 09:50
@Philip: I just pasted the unencoded string into Chrome's address bar, and checked the "network" tab in the developer tools. Chrome encodes the Japanese characters to `/files/audio/words/%E5%8B%95%E7%89%A9_%E3%81%A9%E3%81%86%E3%81%B6%E3%81%A4`, which is the same result as passing `/files/audio/words/動物_どうぶつ` through `encodeURI`. Maybe if you post your updated code we'll see something different. Or perhaps stick some debugging alerts or console logging statements down. – Andy E May 13 '11 at 09:50
I must have made a typo because encodeURI now works fine in all browsers except FF. In Firefox, however, the audio button still doesn't work like before. – Philip Seyfi May 13 '11 at 09:53
@Philip: a quick test in Firefox 4 shows the URL is encoded exactly the same as in Chrome. I don't have a login on your site to see if the file is returned, though. Have you tested pasting the URL directly into the browser? I have a feeling we may be barking up the wrong tree with the URL encoding. – Andy E May 13 '11 at 09:58
I've been trying just that moments ago ^^ If I paste nihongoup.com/files/audio/words/%E5%8B%95%E7%89%A9_%E3%81%A9%E3%81%86%E3%81%B6%E3%81%A4.wav or nihongoup.com/files/audio/words/%E5%8B%95%E7%89%A9_%E3%81%A9%E3%81%86%E3%81%B6%E3%81%A4.mp3 in Firefox, it won't play. If however, I paste nihongoup.com/files/audio/words/%E5%8B%95%E7%89%A9_%E3%81%A9%E3%81%86%E3%81%B6%E3%81%A4.wav, and rename what will appear in the address bar from .wav to .mp3, the file plays fine. – Philip Seyfi May 13 '11 at 10:02
BTW it's strange that you can't access http://nihongoup.com/vocabulary/animals/ without logging in. The URL shoudl be accessible without registering and I've just tested it on two computers and it opened fine without me logging in. – Philip Seyfi May 13 '11 at 10:03
@Philip: I had no problem accessing that page, just the audio files. It's no problem, just halted my investigation. Perhaps this is a bug in Firefox then? – Andy E May 13 '11 at 10:17
When you visit http://nihongoup.com/vocabulary/animals/ without logging in, do you see a list of words? And do you see audio play buttons on the far left side of each row? What do they do when you click them? For me they play a sound in every borwser except FF. – Philip Seyfi May 13 '11 at 10:19
@Philip: oh, I didn't see those. OK, when I click those in Firefox, the status code I'm given is 206 - partial content. Pasting either mp3 or wav URL into the address bar plays the content with my quick time plugin. – Andy E May 13 '11 at 12:03

Audio files with Japanese file names don't play in Firefox

2 Answers2