제목 표시줄에 PC버전 VIBE(바이브) 노래 정보 표시하기

적용 전

적용 후

바이브가 안드로이드와 iOS에서만 앱을 제공하다 PC에서 사용가능한 웹 버전을 공개한지 1년이 되었다.

하지만 아직도 앱이든 웹이든 불편한건 마찬가지고, 대학생 4년 할인만 끝나면 바로 해지할 계획만 세우고 있다.

 

앱은 그나마 업데이트 되면서 쓰레기 수준에선 벗어난 듯 하다.

(재생 목록 전체 플레이리스트 추가하면 첫 곡 순서가 뒤바뀜 문제는 잠수함 패치로 해결. 근데 네이버 뮤직에도 있던 Wi-Fi Direct를 이용한 음악 전송기능은 왜 없앤건데?)

 

하지만 웹 버전은 정말 끔찍한데, 개인적인 가장 큰 문제점은 다음과 같다.

 

1. 전용 플레이어의 부재
   
   • 네이버 뮤직에도 있던 재생창이 한 페이지에 통합되어 있다. 따로 새 창으로 안뜨니 작업 표시줄이 깔끔해지는건 좋은데, 어떠한 단축키도 없어 모두 마우스로 클릭해야한다. 볼륨/탐색/일시정지 모두. 크롬의 업데이트로 재생중인 미디어의 탐색 기능이 추가됐는데, 되는건 일시정지 뿐이다. 어차피 바이브에서 추가된건 아니다.
   • 다른 기타 기능도 없다. 이전에 사용하던 벅스에선 EQ나 타이머, 음질 모두 설정 가능했으나 여긴 그딴거 없다.
2. 내가 뭘 재생하고 있는지 알 수 없다
   • 어떤 노래를 재생하고 있는지 알려주는건 중요하다. 네이버 뮤직처럼 내가 듣고싶은 노래만 재생 목록에 넣어두고 듣는 서비스가 아닌 바이브처럼 맞춤 추천을 해주는 서비스는 더더욱. 난 모르지만 내가 좋아할만한 노래를 추천해준다는건 (스포티파이를 '참고'했든 안했든) 참 좋은 기능이다.
   • 근데 항상 내가 현재 있는 페이지의 제목만 표시한다. 뭐 어쩌라고?

사실 전용 플레이어의 부재가 가장 큰 문제이고 벅스/멜론같은 전용 프로그램도 필요 없으니 네이버 뮤직처럼 별도 플레이어 창만 제공하면 해결될 문제이다. 근데 안하겠지.

 

개인적으로 2번이 너무 불편해서 탭 이름변경 가능한 크롬 확장 기능으로 어찌 할 수 있을까 하다 찾아낸게 이것.

Tab Modifier

페이지 내 HTML 태그를 추출해서 제목 표시줄에 사용할 수 있는 기능까지 제공해서 이 확장 기능만으로 제목 표시는 가능하다. 하지만 페이지의 새로고침 없이 노래만 바뀌는 바이브 플레이어 특성상 처음 표시된 제목만 계속 나오는 문제가 발생했다.

 

그래서 10초마다 한번씩 제목 표시줄을 업데이트 하도록 수정

TheNoFace/chrome-tab-modifier

(프로그래밍 해본 적 없는데 타이머 하나 추가한다고 고생했다.)

 

- 적용하기

 

본인은 크로미움 기반의 엣지 브라우저 베타버전을 사용하고 있다.

크롬 및 다른 크로미움 기반 브라우저에서도 적용법은 동일하다

 

0. 파일 다운로드 후 압축 해제

VIBE_INFO.zip

0.08MB

1. edge://extensions/ 으로 이동 (크롬일 경우 chrome://extensions/)

2. 개발자 모드 활성화

3. 압축 풀린 파일 로드 선택 -> 압축 해제한 Chrome Tab Modifier 폴더 선택

4. Chrome Tab Modifier 설정 페이지에서 Settings 진입

5. Backup 항목에서 Import tab rules -> Import and add 선택 후 VIBE_INFO.json 업로드

6. VIBE 페이지 새로고침

 

- 수정하기

 

현재 새로고침 빈도는 매 10초마다이다. (GitHub엔 3초로 올려놨지만 10초가 제일 나은 듯 하다.)

코드를 만질 줄 알아서 타이머 세부 설정이나 페이지별 적용 기능을 넣을 수 있었다면 좋았겠지만 능력이 안된다.

 

결국 빈도를 수정하고 싶으면 직접 바꿔야한다.

 

압축 해제한 Chrome Tab Modifier 폴더 내 js 폴더의 content.js를 수정한 후에 다시 브라우저로 업로드 하면 된다.

내가 건드린건 177번줄의 제목 설정 항목.

 

        // Set title
        // Refresh every 10s for pages not refreshing when contents are changed
        setInterval(function () {
            if (rule.tab.title !== null) {
                if (document.title !== null) {
                    document.title = processTitle(location.href, document.title);
                }
            }
        }, 10000);

 

185번째 줄의 10000을 선호하는 시간으로 변경하면 된다. 밀리초 단위이니 주의할 것.

 

- 알림

 

• 개발자 모드로 확장 기능을 업로드 하면 브라우저를 켤 때마다 다음과 같이 경고가 뜬다. 크로미움 정책상 어쩔 수 없으니 ESC로 없애고 사용하면 된다

 

• 재생목록이 비어있거나 하단 플레이어가 사용되지 않는 바이브 페이지일 경우 제목 표시줄이 이상하게 뜬다. 보기 싫으면 확장 기능을 지우면 되는데, 알아서 선택하시길.