forked from iandevlin/html5bones
-
Notifications
You must be signed in to change notification settings - Fork 0
/
audio.html
88 lines (69 loc) · 4.55 KB
/
audio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="en"> <!-- Set this to the main language of your site -->
<head>
<!-- Define the page charset to be utf-8 -->
<meta charset="utf-8">
<title><!-- Enter page title here --></title>
<!-- Enter a brief description of your page -->
<meta name="description" content="">
<!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add normalize.css which enables browsers to render all elements more consistently and in line with modern standards as it only targets particular styles that need normalizing -->
<link href="css/normalize.css" rel="stylesheet" media="all">
<!-- Include the site stylesheet -->
<link href="css/styles.css" rel="stylesheet" media="all">
<!-- Include the HTML5 shiv and shiv print polyfills for Internet Explorer browsers 8 and below -->
<!--[if lt IE 9]><script src="js/html5shiv-printshiv.js" media="all"></script><![endif]-->
</head>
<body>
<!-- This audio element tells the browser to display the default control set and to only preload the audio's metadata (e.g. video duration) -->
<audio id="audio" controls preload="metadata">
<!-- Provide multiple audio sources for cross-browser support -->
<!-- MP3 source for Chrome, Safari, IE9+, iOS and Android 2.3+
NOTE: For Android 2.2 support see below -->
<source src="url-to-audio.mp3" type="audio/mp3">
<!-- Ogg source for Firefox, Chrome and Opera -->
<source src="url-to-audio.ogg" type="audio/ogg">
<!-- Provide a Flash fallback for browsers that don't support HTML5 audio, e.g. Internet Explorer 6-7.
This uses the Google Player to play the MP4 file. The height and width attributes are set to appropriate values for an audio player. Feel free to change them.
NOTE: The Google Player (player.swf) is taken from the Google Video Service which is no longer available. It also plays audio files. -->
<object type="application/x-shockwave-flash" data="player.swf?audioUrl=url-to-audio.mp3" height="27" width="320">
<param name="movie" value="player.swf?audioUrl=url-to-audio.mp3">
</object>
<!-- Add a downloadable link for users who do not have a HTML5 audio capable browser, nor Flash installed
NOTE: This link will be displayed even if the user has Flash installed -->
<a href="url-to-audio.mp3">Download MP3 audio</a>
</audio>
<!-- Use this if you need to support Android 2.2 devices -->
<!-- Android 2.2 supports the audio tag but none of the codecs. However an MP3 file can be played in the video tag, although it does go to fullscreen mode. This is a possible workaround if Android 2.2 support is required -->
<!--
<video id="video" controls>
<source src="url-to-audio.mp3">
</video>
-->
<!-- The main page footer can contain items such as copyright and contact information. It can also contain a duplicated navigation of your site which is not usually contained within a <nav> -->
<!-- ARIA: the landmark role "contentinfo" is added here as it contains metadata that applies to the parent document -->
<footer role="contentinfo">
<!-- Copyright information can be contained within the <small> element. The <time> element is used here to indicate that the '2012' is a date -->
<small>Copyright © <time datetime="2013">2013</time></small>
</footer>
<!-- Required to initiate video play in Android -->
<script>
// Use browser sniffing to check if it's Android (some say browser sniffing is bad - but I think it's appropriate here)
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1;
// If this is an Android browser, then add a click handler to play the audio and video when it is "clicked"
if (isAndroid) {
var audio = document.getElementById("audio");
if (audio) audio.addEventListener("click", function() { audio.play(); }, false);
var video = document.getElementById("video");
if (video) video.addEventListener("click", function() { video.play(); }, false);
}
</script>
<!-- Google Analytics - Optimized version by Mathias Bynens -->
<!-- See: http://mathiasbynens.be/notes/async-analytics-snippet -->
<!-- Change the UA-XXXX-XX string to your site's ID -->
<script>
var _gaq=[['_setAccount','UA-XXXX-XX'],['_trackPageview']];(function(a,b){var c=a.createElement(b),d=a.getElementsByTagName(b)[0];c.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";d.parentNode.insertBefore(c,d)})(document,"script");
</script>
</body>
</html>