cm-web-legacy/public/radio.html

<html lang="en">

<head>
    <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
    <select class="cm-febc-stations">
        <option value="">극동방송</option>
    </select>

    <select class="cm-cts-stations">
        <option value="">CTS</option>
    </select>
    <button id="pause_btn">정지</button>
    <button id="play_btn">시작</button>
    <video style="display:none" class="video-js vjs-default-skin" autoplay controls="controls" width="640" height="268">
        <source src="https://cdn.zroad.tv/channel36_1/stream36_1/playlist.m3u8" type="application/x-mpegURL" />
    </video>


    
    
<audio controls autoplay src="http://crossmap.co.kr:8000/CMStation" type="audio/mp3"></audio>

    <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
    <script type="text/javascript">
        $(function () {
            stationUrl = '';
            videoId = '';
            var stations = {
                febc: [
                    {
                        title: "서울극동방송FM",
                        params: { branch_cd: "001", channel_cd: "RA_001", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/seoulfm/playlist.m3u8'
                    },
                    {
                        title: "제주극동방송FM",
                        params: { branch_cd: "002", channel_cd: "RA_014", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/jejufm/playlist.m3u8'
                    },
                    {
                        title: "대전극동방송FM",
                        params: { branch_cd: "003", channel_cd: "RA_003", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/djlive/playlist.m3u8'
                    },
                    {
                        title: "목포극동방송FM",
                        params: { branch_cd: "005", channel_cd: "RA_005", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/mplive/playlist.m3u8'
                    },
                    {
                        title: "영동극동방송FM",
                        params: { branch_cd: "006", channel_cd: "RA_006", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/ydlive/playlist.m3u8'
                    },
                    {
                        title: "부산극동방송FM",
                        params: { branch_cd: "009", channel_cd: "RA_009", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/bsfebc/playlist.m3u8'
                    },
                    {
                        title: "대구극동방송FM",
                        params: { branch_cd: "010", channel_cd: "RA_010", fre: "fm" },
                        url: 'http://220.73.173.216:1935/live/daegulive/playlist.m3u8'
                    },
                    {
                        title: "광주극동방송FM",
                        params: { branch_cd: "011", channel_cd: "RA_011", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/gjlive/playlist.m3u8'
                    },
                    {
                        title: "전북극동방송FM",
                        params: { branch_cd: "014", channel_cd: "RA_015", fre: "fm" },
                        url: 'http://mlive2.febc.net:1935/live/jblive/playlist.m3u8'
                    }
                ],
                cts: [
                    {
                        title: "종합편성",
                        url: 'https://cdn.zroad.tv/channel36_1/stream36_1/playlist.m3u8'
                    },
                    {
                        title: "말씀",
                        url: 'https://external.cdn.zroad.tv/ChurchTV_radio/live/playlist.m3u8'
                    },
                    {
                        title: "CCM",
                        url: 'https://cdn.zroad.tv/channel36_4/stream36_4/playlist.m3u8'
                    },
                    {
                        title: "복음성가",
                        url: 'https://cdn.zroad.tv/channel36_3/stream36_3/playlist.m3u8'
                    }
                ],
                joy4u:[
                    {
                        title: "송정훈의 로뎀나무 아래서",
                        url: 'http://aac.cbs.co.kr/cbscmc/_definst_/cbscmc_96k.stream/playlist.m3u8'
                    }
                ]
            };


            $('.cm-febc-stations,.cm-cts-stations').on('change', function () {
                stationUrl = this.value
                $('#'+videoId).remove();
                videoId = 'cmVideo' + (Math.random() + '').substring(3, 6);
                play();
            })
            $('#pause_btn').on('click', function(){
                pause();
            })
            $('#play_btn').on('click', function(){
                resume();
            })
            $.each(stations.febc, function (k, station) {
                var option = $('.cm-febc-stations option').first().clone();
                $('.cm-febc-stations').append(option.val(station.url).text(station.title))
            })
            $.each(stations.cts, function (k, station) {
                var option = $('.cm-cts-stations option').first().clone();
                $('.cm-cts-stations').append(option.val(station.url).text(station.title))
            })
        });
        function pause() {
            var vid = videojs(videoId);
            var pause_btn = document.getElementById("pause_btn");
            var play_btn = document.getElementById("play_btn");

            vid.pause();
            pause_btn.style.display = "none";
            play_btn.style.display = "inline";
        }

        function resume() {
            var vid = videojs(videoId);
            var pause_btn = document.getElementById("pause_btn");
            var play_btn = document.getElementById("play_btn");

            vid.play();
            pause_btn.style.display = "inline";
            play_btn.style.display = "none";
        }

        function play() {            
            var video = $('video').clone();
            video.attr('id', videoId);
            video.find('source').attr('src', stationUrl)
            video.data('setup', '{"liveui": true}')
            $('video').after(video)
            video.show();
            var vid = videojs(videoId);
            var pause_btn = document.getElementById("pause_btn");
            var play_btn = document.getElementById("play_btn");

            vid.play();
            pause_btn.style.display = "inline";
            play_btn.style.display = "none";
        }

        function mute() {
            var volume_btn = document.getElementById("volume");
            var vid = videojs(videoId);

            volume_btn.value = 0;
            vid.volume(0);
        }

        function printValue(volume) {
            var vid = videojs(videoId);
            var y = document.getElementById(volume);

            vid.volume(y.value);
        }
    </script>
</body>

</html>