안녕하세요.
자주 찾아오지는 못하지만, 정보 알아보며 글 적어보는 곳은 이곳을 포함해서 손에 꼽히네요.
오랫만에 잡스러운 생각이 들어 찾아보다가 정리를 좀 해봤습니다.
제 차량들은 구식이라 네비게이션 용으로 비싼 안드로이드 오토 헤드유닛을 달았지만,
80%는 네비게이션을 이용하고 20%는 라디오를 듣는게 전부였습니다.
하지만, 이녀석들이 라디오쪽 수신이 별로 안좋아서 그런지 터널, 산을 지나가면 전파가 약하거나
지방으로 가면 채널이 안잡히는 등 불편했습니다.
그래서, 안드로이드 어플인 KBS 콩 등등을 설치해봤지만
쓸데 없는 광고 등을 봐야 하고 데이터도 어지간히 많이 먹어서 부담스러워져
(차량 네비 전용이라 2천원 미만 3~6GB 데이터 사용하는 요금제)
인터넷의 방송국 라디오 라이브 주소를 따서 html 로 만들어 한 화면에서 봐야겠다고
생각해서 AI 도움 받아서 html 을 만들어봤습니다.
그리고, 방송국 채널이나 특성상 차이가 있겠으나 대략 아래와 같은 계산이 나왔습니다.
| 방송국 | 데이터 업데이트 주기 | 분당 Mbit 사용량 | 분당 사용MB (Mbyte) |
| KBS | 1Mb/5초 | 12Mb | 1.5MB |
| MBC | 200Kb/3초 | 4Mb | 0.5MB |
| SBS | 1.6Mb/10초 | 9.6Mb | 1.2MB |
| CBS | 20Mb/4초 | 300Mb | 37.5MB |
| YTN | 2.4Mb/4초 | 36Mb | 4.5MB |
주말 다 지나가는데 안드로이드 헤드유닛 펌웨어도 업데이트하고
html 도 잘 동작하는지 봐야겠네요.
다들 주말 마무리 잘 하시고 다음주 추위에 감기 조심하시기 바랍니다.
근데 브라우저 보안으로 최초에는 재생이 안되어 두번 눌러주거나 다른 채널로 가면 다른 채널부터 들리기 시작합니다.
그리고 mbc와 ytn 등은 별도 탭에서 play 시켜야 하고.. 다시 다른 채널을 선택하면 별도 탭은 사라지게 만들었습니다. 그냥 본 글에 남길께요.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Player</title>
<style>
body { margin: 0; padding: 0; background: #000; color: #fff; font-family: 'Gothic', sans-serif; display: flex; width: 600px; height: 400px; overflow: hidden; }
#sidebar { width: 150px; background: #1a1a1a; overflow-y: auto; border-right: 2px solid #333; }
.ch-group { padding: 8px 12px; background: #111; font-size: 11px; color: #666; font-weight: bold; }
.ch-btn {
width: 100%; padding: 18px 12px; border: none; border-bottom: 1px solid #222;
background: #2b2b2b; color: #fff; text-align: left; font-size: 15px; font-weight: bold;
cursor: pointer; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kbs { border-left: 5px solid #1572b6; }
.mbc { border-left: 5px solid #e41d2d; }
.etc { border-left: 5px solid #555; }
.ch-btn:active { background: #444; }
.ch-btn.active { background: #0078d4; color: #fff; }
/* 오른쪽 화면 */
#main-view { flex: 1; background: #000; position: relative; display: flex; align-items: center; justify-content: center; }
iframe { width: 100%; height: 100%; border: none; }
/* 안내 메시지 */
#placeholder-msg { display: none; text-align: center; color: #888; font-size: 13px; line-height: 1.6; }
/* 스크롤바 */
#sidebar::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
</style>
</head>
<body>
<div id="sidebar">
<div class="ch-group">KBS </div>
<button class="ch-btn kbs" onclick="play(this, 'https://onair.kbs.co.kr/index.html?sname=onair&stype=live&ch_code=22', 'frame')">HappyFM</button>
<button class="ch-btn kbs" onclick="play(this, 'https://onair.kbs.co.kr/index.html?sname=onair&stype=live&ch_code=24', 'frame')">ClassicFM</button>
<button class="ch-btn kbs" onclick="play(this, 'https://onair.kbs.co.kr/index.html?sname=onair&stype=live&ch_code=25', 'frame')">CoolFM</button>
<div class="ch-group">MBC (새 탭 재생)</div>
<button class="ch-btn mbc" onclick="play(this, 'https://miniwebapp.imbc.com/index?channel=sfm', 'newtab')">표준FM</button>
<button class="ch-btn mbc" onclick="play(this, 'https://miniwebapp.imbc.com/index?channel=mfm', 'newtab')">FM4U</button>
<button class="ch-btn mbc" onclick="play(this, 'https://miniwebapp.imbc.com/index?channel=chm', 'newtab')">올댓뮤직</button>
<div class="ch-group">ETC</div>
<button class="ch-btn etc" onclick="play(this, 'https://www.sbs.co.kr/live/S19?div=live_end', 'frame')">SBS 고릴라</button>
<button class="ch-btn etc" onclick="play(this, 'https://www.cbs.co.kr/onair/musicFm', 'frame')">CBS 음악FM</button>
<button class="ch-btn etc" onclick="play(this, 'https://tbs.seoul.kr/player/live.do?channelCode=CH_A', 'newtab')">TBS 교통</button>
<button class="ch-btn etc" onclick="play(this, 'https://radio.ytn.co.kr/_comm/fmlive_hls.php', 'frame')">YTN 뉴스</button>
</div>
<div id="main-view">
<iframe id="radio-frame" src="" allow="autoplay; encrypted-media"></iframe>
<div id="placeholder-msg">
새 탭에서 재생 중.<br>
(브라우저 상단 탭을 확인)
</div>
</div>
<script>
// 새 창 인스턴스를 저장할 변수
let externalWin = null;
function play(obj, url, type) {
// 1. 버튼 활성화 스타일 처리
const btns = document.querySelectorAll('.ch-btn');
btns.forEach(b => b.classList.remove('active'));
obj.classList.add('active');
const frame = document.getElementById('radio-frame');
const msg = document.getElementById('placeholder-msg');
// 2. 재생 방식 분기
if (type === 'frame') {
// 기존에 열린 음악탭 닫기
if (externalWin && !externalWin.closed) {
externalWin.close();
}
frame.style.display = 'block';
msg.style.display = 'none';
frame.src = url;
} else {
// 새 탭에서 열기
frame.src = 'about:blank';
frame.style.display = 'none';
msg.style.display = 'block';
// 외부탭 닫고 새로 열기 (중복 탭 방지)
if (externalWin && !externalWin.closed) {
externalWin.close(); }
externalWin = window.open(url, '_blank'); } }
// 페이지 로드 시 자동 실행
window.onload = function() {
const buttons = document.querySelectorAll('.ch-btn');
let targetBtn = null;
buttons.forEach(btn => {
if (btn.innerText.includes('SBS')) {
targetBtn = btn; } });
if (targetBtn) {
targetBtn.click();
} else {
const etcBtn = document.querySelector('.etc');
if (etcBtn) etcBtn.click(); } };
</script>
</body>
</html>
위 내용 두개를 모두 하나의 html 로 만드셔야 해요.
<html> 로 시작해서 </html> 로 끝나는게 내용이고, 저장할때 확장자는 .html 로 만드셔야 합니다.
이후에 .. html 파일을 브라우저 빈 영역에 끌고와보셔요.
인터넷으로 듣는 사람이 별로 없나보네요.