PairDrop/app/elements/sound-notification/sound-notification.html

<dom-module id="sound-notification">
    <template>
        <audio id="blop" preload="auto" autobuffer="true">
            <source src="/sounds/blop.mp3" id="mp3Source" type="audio/mpeg">
            <source src="/sounds/blop.ogg" id="oggSource" type="audio/ogg">
        </audio>
    </template>
</dom-module>
<script>
'use strict';
Polymer({
    is: 'sound-notification',
    properties: {
        volumes: {
            value: {
                'blop': 0.8,
            }
        }
    },
    attached: function() {
        // mobiles don't like autoplay - the first play must be triggert by user interaction
        var that = this;
        var hackListener = function() {
            that.volumes.blop = 0.1;
            that.play();
            document.body.removeEventListener('touchstart', hackListener, false);
            that.volumes.blop = 0.8;
        };
        document.body.addEventListener('touchstart', hackListener, false);
    },
    play: function() {
        this._play('blop');
    },
    _play: function(sound) {
        var audio = this.$[sound];
        if (!audio) {
            console.warn('audio ', sound, ' doesn\'t exist.');
            return;
        }

        if (audio.readyState > 0) {
            audio.volume = this.volumes[sound];
            audio.pause();
            audio.currentTime = 0;
            audio.play();
        } else {
            console.warn('audio not ready yet...');
            //play when ready
            //TODO: play only if ready within next ~500ms 
            audio.addEventListener('loadedmetadata', function() {
                this._play(sound);
            }.bind(this), false);
        }
    }
});
</script>