File size: 3,038 Bytes
c64b66e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
# -*- coding: utf-8 -*-
"""AIR_Widget.ipynb

Automatically generated by Colab.

Original file is located at
    https://colab.research.google.com/drive/13DSMlvyBAyKz0NMD4uE8u26KOtQVK5mx
"""



import gradio as gr
import base64

# AIR News 24x7 stream URL
stream_url = "https://air.pc.cdn.bitgravity.com/air/live/pbaudio001/playlist.m3u8"
station_name = "AIR News 24x7"

def generate_iframe():
    html_template = f"""
    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
        <style>
            body {{
                font-family: sans-serif;
                text-align: center;
                margin: 0;
                padding: 1em;
            }}
            video {{
                width: 80%;
                max-width: 600px;
                height: 50px;
                background: #000;
            }}
            #notice {{
                color: red;
                margin-top: 10px;
            }}
        </style>
    </head>
    <body>
        <h3>{station_name}</h3>
        <video id="player" controls autoplay></video>
        <div id="notice">๐Ÿ”ˆ If playback doesn't start automatically, click play.</div>
        <script>
            var video = document.getElementById('player');
            if (Hls.isSupported()) {{
                var hls = new Hls();
                hls.loadSource("{stream_url}");
                hls.attachMedia(video);
                hls.on(Hls.Events.MANIFEST_PARSED, function () {{
                    var playPromise = video.play();
                    if (playPromise !== undefined) {{
                        playPromise.catch(function() {{
                            document.getElementById("notice").innerText = "Click play to start radio";
                        }});
                    }}
                }});
            }} else if (video.canPlayType('application/vnd.apple.mpegurl')) {{
                video.src = "{stream_url}";
                video.addEventListener('loadedmetadata', function () {{
                    var playPromise = video.play();
                    if (playPromise !== undefined) {{
                        playPromise.catch(function() {{
                            document.getElementById("notice").innerText = "Click play to start radio";
                        }});
                    }}
                }});
            }} else {{
                document.getElementById("notice").innerText = "โŒ Your browser does not support HLS audio.";
            }}
        </script>
    </body>
    </html>
    """
    html_base64 = base64.b64encode(html_template.encode("utf-8")).decode("utf-8")
    iframe_src = f"data:text/html;base64,{html_base64}"
    return f"""<iframe src="{iframe_src}" width="100%" height="180px" frameborder="0"></iframe>"""

with gr.Blocks() as demo:
    gr.Markdown("## ๐ŸŽ™๏ธ AIR News 24x7 Live Stream")
    gr.Markdown("โ–ถ Autoplay enabled. If autoplay is blocked, click the play button.")
    output = gr.HTML(value=generate_iframe())
demo.launch()