rhi
/
yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

improve non-js audio fallback

This commit is contained in:
Rhiannon Morris 2021-05-25 16:03:05 +02:00
parent d4e6d5b6d8
commit f440410b76
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -67,7 +67,7 @@
<dl> <dl>
<dt> how to say <dt> how to say
<dd> <dd>
<a id=soundlink href=#> <a id=soundlink>
<span class=ipa>nɪs</span>, <span class=ipa>nɪsə</span> <span class=ipa>nɪs</span>, <span class=ipa>nɪsə</span>
</a> </a>
<audio id=miku> <audio id=miku>
@ -75,6 +75,9 @@
<source src=media/niss-nisse.ogg type=audio/ogg> <source src=media/niss-nisse.ogg type=audio/ogg>
(<a href=media/niss-nisse.mp3>listen</a>) (<a href=media/niss-nisse.mp3>listen</a>)
</audio> </audio>
<noscript>
(<a href=media/niss-nisse.mp3>listen</a>)
</noscript>
<dt> prons <dd title='she for niss, he for nisse'> it or they <dt> prons <dd title='she for niss, he for nisse'> it or they
<dt> quantity <dd> 2 <dt> quantity <dd> 2
@ -90,7 +93,13 @@ window.addEventListener('DOMContentLoaded', () => {
let link = document.getElementById('soundlink'); let link = document.getElementById('soundlink');
let miku = document.getElementById('miku'); let miku = document.getElementById('miku');
if (typeof miku.play == 'function') { if (typeof miku.play == 'function') {
link.addEventListener('click', e => { miku.play(); e.preventDefault(); }); function playMiku(e) {
miku.play();
e.preventDefault();
}
link.href = '#';
link.addEventListener('click', playMiku);
} }
}); });
</script> </script>

4
style.css
View File

@ -140,13 +140,13 @@ dd {
} }
} }
a { a[href] {
color: hsl(196deg, 100%, 85%); color: hsl(196deg, 100%, 85%);
font-weight: 800; font-weight: 800;
text-decoration: none; text-decoration: none;
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
} }
a:hover { a[href]:hover {
color: hsl(50deg, 100%, 82%); color: hsl(50deg, 100%, 82%);
} }