티스토리에 배경음악 넣기 2가지 방법 비교 [scmplayer.co VS wikplayer.com]

scmplayer.co VS wikplayer.com

티스토리에 음악을 넣는 방법을 검색해보니 위 두 사이트의 스크립트를 이용하면 된다고 한다.

그래서 둘다 적용해보니 사용방법은 거의 같다. 

각 사이트에서 스킨 설정하고 playlists 등록하고 스크립트 복사해서 티스토리 스킨 편집기에서 붙여넣기 하면 끝!


scmplayer.co 사용기

스킨이 다양하다. 커스터마이징 된 스킨도 많이 올라온다.

단점은 구글 맞춤 검색시 오류가 발생한다. 검색결과를 클릭해도 작동이 안되는 등의 문제가 발생한다.


wikplayer.com 사용기

scmplayer.co 와 반대로 스킨은 다양하지 않지만 구글 맞춤 검색은 잘된다.

그래서 scmplayer.co의 스타일과도 유사해서 scmplayer의 스킨을 이용해서 기본 스킨을 커스터마이징 했다.

CSS 위치 : "https://tistory3.daumcdn.net/tistory/307026/skin/images/tunes.css"

아래 스크립트 중 playlist를 유튜브 등에서 원하는 곡으로 바꾸면 된다.



<script type="text/javascript" src="https://www.wikplayer.com/code.js" 
	data-config="{
		'skin':'https://tistory3.daumcdn.net/tistory/307026/skin/images/tunes.css',
		'volume':10,
		'autoplay':true,
		'shuffle':true,
		'repeat':1,
		'showcomment':true,
		'marqueetexton':false,
		'placement':'bottom',
		'showplaylist':false,
		'playlist':[
			{'title':'Agnes%20Baltsa%20-%20Aspri%20Mera%20Ke%20Ya%20Mas','url':'https%3A%2F%2Fyoutu.be%2FqAKbtR3hE6k'},
			{'title':'Alexandre%20Desplat%20-%20Mr.%20Moustafa','url':'https%3A%2F%2Fyoutu.be%2FvoX15vG2gOk'},
			{'title':'Chuck%20Mangione%20-%20Lullabye','url':'https://youtu.be/iSHtZB487Q4'},
			{'title':'Chuck%20Mangione-Lullabye%20(Vocal%20Version)','url':'https://youtu.be/Z7cyMDDR-oc'},
			{'title':'Ennio%20Morricone%20-%20The%20Legend%20Of%201900%20%22Playing%20Love%22','url':'https%3A%2F%2Fyoutu.be%2FltClhAHFHAo'},
			{'title':'Keith%20Jarrett%20-%20K%C3%B6ln%2C%20January%2024%2C%201975%2C%20Pt.%20I%20(Live)','url':'https://soundcloud.com/eva-binnemann/keith-jarret-the-koln-concert-part-l'},
			{'title':'Luciano%20Pavarotti%20-%20E%20lucevan%20le%20stelle','url':'https%3A%2F%2Fyoutu.be%2FnGrYS-_ynBo'},
			{'title':'Maria Callas -%20Un%20bel%20di%20vedremo','url':'https://youtu.be/mN9Dipgqdtw'},
			{'title':'Yuhki%20Kuramoto%20-%20Little%20Starlight','url':'https%3A%2F%2Fyoutu.be%2FiQCdayUUGpk'},
			{'title':'%ED%94%BC%EA%B0%80%EB%A1%9C%EC%9D%98%20%EA%B2%B0%ED%98%BC%20-%20%ED%8E%B8%EC%A7%80%EC%9D%98%20%EC%9D%B4%EC%A4%91%EC%B0%BD','url':'https%3A%2F%2Fyoutu.be%2FhXqO2gmftgk'},
			{'title':'Lillian Boutte - Am I Blue','url':'https://youtu.be/b4wrDwZcmrc'},
			{'title':'Nina Simone - Little girl blue','url':'https://youtu.be/Svl5-cu9oJo'},
			{'title':'Erik Satie - Je te veux','url':'https://youtu.be/XS5VTKlEsBo'},
			{'title':'Erik Satie - Gymnopédie No. 1','url':'https://youtu.be/0BCPe7gauok'}
			]
		}">
</script>





'CSS & HTML' 카테고리의 다른 글

HTML 용어 정리 #1 - HTML  (0) 2019.09.25
CSS로 첫글자만 꾸미기  (0) 2019.07.20
Select Box 알아 보기  (0) 2017.12.14
링크 점선 안보이게  (0) 2016.06.14
반응형 웹에서 이미지 크기 자동 조절 스타일시트CSS  (0) 2016.05.04