Can't play audio with google app engine. It works locally

Question

I have a webpage with some arabic numbers and where an audio is played with mouseover action and the numbers get pronounced. It works locally in my browser but it doesn't work under google app engine. It doesn't work locally under google app engine either but if I just run the html file it works. Here's part of my code

<script language="javascript" type="text/javascript">

 function playSound(soundfile) {
 document.getElementById("dummy").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 };
 </script>

<div>

    <table>
        <tr>    
            <td onmouseover="playSound('numbers/1.mp3');">واحِد</td>
            <td onmouseover="playSound('numbers/1st.mp3');">الأَوَّل</td>
            <td onmouseover="playSound('numbers/1st_f.mp3');">الأُولى</td>
            <td onmouseover="playSound('numbers/saturday.mp3');">السَّبْت</td>
        </tr>

    </table>

Here's the python code

import os
import webapp2
import jinja2
from google.appengine.ext import db

template_dir = os.path.join(os.path.dirname(__file__), 'templates')
jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),
                               autoescape=True)

class Handler(webapp2.RequestHandler):
    def write(self, *a, **kw):
        self.response.out.write(*a, **kw)
    def render_str(self, template, **params):
        t = jinja_env.get_template(template)
        return t.render(params)
    def render(self, template, **kw):
        self.write(self.render_str(template, **kw))

class MainPage(Handler):
    def get(self):
        self.render('ArabicNumbers.html')

app = webapp2.WSGIApplication([('/', MainPage)], debug=True)

And here's app.yaml

application: arabicbetweenyourhands
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

- url: .*
  script: main.app

libraries:
- name: webapp2
  version: "2.5.1"

- name: jinja2
  version: latest

Also, here the url of the website. arabicbetweenyourhands.appspot.com. You can see the full source code there. Any ideas?? Thank you

Answer 1

When I visited your page, I got a 404 for http://arabicbetweenyourhands.appspot.com/numbers/4th_f.mp3

You need to add your 'numbers' directory as a static directory to your app.yaml and add the appropriate mime type, like so:

handlers:
- url: /numbers
  static_dir: numbers
  mime_type: audio/mp3