56 lines
1.6 KiB
HTML
56 lines
1.6 KiB
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>
|