zen-audio-player.github.io/index.html at master · IsaiahN/zen-audio-player.github.io · GitHub

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Listen to YouTube videos, without the distracting visuals">
    <meta name="author" content="Shakeel Mohamed">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="google-site-verification" content="D3SjNR3tmNYOusESQijh_oH5SGmU9QsAIVwlqizwRBU" />

    <title>Zen Audio Player</title>

    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css">
    <link rel="stylesheet" href="css/styles.css">

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src="js/everything.js"></script>
</head>
<body>
    <header>
        <!-- The logo & description -->
        <figure>
            <a href="https://zen-audio-player.github.io" title="Zen Audio Player">
                <img src="img/zen-audio-player-905.png" class="logo" alt="Zen Audio Player logo">
            </a>
            <figcaption>Listen to YouTube videos, without the distracting visuals.</figcaption>
        </figure>
    </header>
    <div id="container">
        <!-- The form -->
        <form id="form">
            <div class="input-group">
                <input type="text" id="v" name="v" placeholder="Enter a YouTube video ID or URL">
                <span class="input-group-button">
                    <button class="btn" id="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </form>
        <br>

        <!-- The video, along with related content & messages -->
        <div id="audioplayer">
            <div id="zen-video-error" class="hide flash flash-error"></div>
            <div id="player">
                <br>
            </div>
            <h3><a id="zen-video-title"></a></h3>
            <div id="playerTime" class="hide">
                <span id="currentTime"></span> / <span id="totalTime"></span>
            </div>
            <div id="playerControls">
                <button class="btn" id="playPause">
                    <i class="fa fa-play" id="play"></i>
                    <i class="fa fa-pause" id="pause"></i>
                </button>
                <button class="btn" id="togglePlayer">
                    Show Player
                </button>
                <button class="btn" id="toggleDescription">
                    Show Description
                </button>
                <br>
                <br>
                <i class="fa fa-volume-down fa-lg"></i>
                <input id="volume" type="text">
                <i class="fa fa-volume-up fa-lg"></i>
            </div>
            <br>
            <div id="zen-video-description" class="hide"></div>
            <br>
            <a id="demo" href="#">Click for Demo</a>
        </div>
    </div>
    <footer>
        <br>
        <!-- Twitter hashtag button: #ZenAudioPlayer -->
        <div id="tweetButton"></div>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        <!-- Attribution, and links -->
        <p>Created by <a href="https://twitter.com/_Shakeel" target="_blank">@_Shakeel</a></p>
        <p>Source available on <a href="https://github.com/zen-audio-player/zen-audio-player.github.io" target="_blank">GitHub</a></p>
        <p><a href="https://chrome.google.com/webstore/detail/zen-youtube-audio-player/jlkomkpeedajclllhhfkloddbihmcjlm" target="_blank">Get the Chrome extension</a> - (<a href="https://github.com/zen-audio-player/extension-chrome" target="_blank">source</a>)</p>
    </footer>
    <!-- Schema.org structured data -->
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Organization",
            "url": "http://zen-audio-player.github.io",
            "logo": "http://zen-audio-player.github.io/img/zen-audio-player-905.png"
        }
    </script>
</body>
</html>