English

Data-Info

                 

General 참고 - Modified Music Player

2010.02.02 06:40

운영자 Views:116

When we add music to our website, we have to consider that some readers may not like music in general or the particular music attached to the webpage, while reading the webpage.
It is a good idea to show the "player", so that the reader can have the choice of turning the music off or adjusting the volume of the music.
Some people attach a loud or high pitch music in maximum volume without player. Please remember that what you like is not necessarily loved by others.

So, please try to use the following codings.
Instead of volume="0", use volume="3" (not maximum but middle),
Instead of hidden="true", use hidden="false" and then write the dimension of width and height.

In current browsers and HTML, the default player is not much adjustable to our likings. We can only change the size with limited colors. 

Nowadays, there are a lot of attractive music players created as a part of SWF files but generally, these are proprietary and we can not adapt them to our own webpages.

Here are one series of modifications with a known song, with pure HTML codes without using SWF file. These may look a little better than what we used to have. You are welcome to try.

All you have to do is copying the codes below the player and replace the URL of the music file and change the size and color of the text about the song. Also change the "audio type" depending on the type of the audio file (wma or mp3...etc).


Typical, with larger text...

Stay with Me Till The Morning - Dana Winner

<div style="BORDER-BOTTOM: #ccc 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #ccc 1px solid; WIDTH: 350px; FONT-FAMILY: Arial; HEIGHT: 40px; FONT-SIZE: 14px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid">
<div style="TEXT-ALIGN: center; BACKGROUND-COLOR: #dcdee9; HEIGHT: 18px; PADDING-TOP: 2px"><font size=2>Stay with Me Till The Morning - Dana Winner</font></div><embed height=28 type=audio/x-mpeg width=350 src=http://www.stevenkim.us/Music/Dana%20Winner%20-%20Stay%20With%20Me%20Till%20The%20Morning.mp3 autostart="1"></div>

With smaller characters...

Stay with Me Till The Morning - Dana Winner

<div style="BORDER-BOTTOM: #ccc 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #ccc 1px solid; WIDTH: 350px; FONT-FAMILY: Arial; HEIGHT: 40px; FONT-SIZE: 14px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid">
<div style="TEXT-ALIGN: center; BACKGROUND-COLOR: #dcdee9; HEIGHT: 18px; PADDING-TOP: 2px"><font size=1>Stay with Me Till The Morning - Dana Winner</font></div><embed height=28 type=audio/x-mpeg width=350 src=http://www.stevenkim.us/Music/Dana%20Winner%20-%20Stay%20With%20Me%20Till%20The%20Morning.mp3 autostart="0"></div>

With darker characters...

Stay with Me Till The Morning - Dana Winner

<div style="BORDER-BOTTOM: #ccc 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #ccc 1px solid; WIDTH: 350px; FONT-FAMILY: Arial; HEIGHT: 40px; FONT-SIZE: 14px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid">
<div style="TEXT-ALIGN: center; BACKGROUND-COLOR: #dcdee9; HEIGHT: 18px; PADDING-TOP: 2px"><font color=#0a0a0a size=1>Stay with Me Till The Morning - Dana Winner</font></div><embed height=28 type=audio/x-mpeg width=350 src=http://www.stevenkim.us/Music/Dana%20Winner%20-%20Stay%20With%20Me%20Till%20The%20Morning.mp3 autostart="0"></div>


With different colored text... (my personal preference)

Stay with Me Till The Morning - Dana Winner

<div style="BORDER-BOTTOM: #ccc 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #ccc 1px solid; WIDTH: 350px; FONT-FAMILY: Arial; HEIGHT: 40px; FONT-SIZE: 14px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid">
<div style="TEXT-ALIGN: center; BACKGROUND-COLOR: #dcdee9; HEIGHT: 18px; PADDING-TOP: 2px"><font color=#1e2d92 size=1>Stay with Me Till The Morning - Dana Winner</font></div><embed height=28 type=audio/x-mpeg width=350 src=http://www.stevenkim.us/Music/Dana%20Winner%20-%20Stay%20With%20Me%20Till%20The%20Morning.mp3 autostart="0"></div>


With different colored text and full size player...

Stay with Me Till The Morning - Dana Winner

<div style="BORDER-BOTTOM: #ccc 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #ccc 1px solid; WIDTH: 350px; FONT-FAMILY: Arial; HEIGHT: 40px; FONT-SIZE: 14px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid">
<div style="TEXT-ALIGN: center; BACKGROUND-COLOR: #dcdee9; HEIGHT: 18px; PADDING-TOP: 2px"><font color=#1e2d92 size=1>Stay with Me Till The Morning - Dana Winner</font></div><embed height=45 type=audio/x-mpeg width=350 src=http://www.stevenkim.us/Music/Dana%20Winner%20-%20Stay%20With%20Me%20Till%20The%20Morning.mp3 autostart="0"></div>


By SNUMA WM - February 2, 2010
* 운영자님에 의해서 게시물 Copy (복사)되었습니다 (2010-02-02 14:34)
No. Subject Author Date Last Update Views
Notice How to write your comments onto a webpage 운영자 2016.07.06 2019.12.31 5551
Notice How to Upload Pictures in webpages 운영자 2016.07.06 2019.12.31 528
Notice How to Write a Webpage 운영자 2016.06.28 2017.07.19 807
Notice Brief Instruction of using SNUMA Website 운영자 2008.04.28 2016.06.28 750
41 Missing Language Bar 운영자 2015.05.17 2015.05.17 1086
40 dl, dt [1] 운영자 2015.01.20 2018.09.09 118
39 dt, dl codes 운영자 2013.11.17 2018.09.06 130
38 New "Sam-Kook-Ji" Drama Series, in Korean [5] 운영자 2012.09.06 2012.09.06 1028
37 When your computer is taken over by a virus 운영자 2011.06.19 2011.06.19 362
36 Retirement Savings and Distribution [1] 운영자 2011.05.05 2011.05.05 458
35 YouTube Video by Embed Tag [11] 운영자 2011.03.29 2016.07.03 542
34 Mahjong Basics [1] 운영자 2010.12.23 2010.12.23 339
33 Good looking fancy fonts [3] 운영자 2010.10.09 2016.07.03 483
32 PhotoWorks Program file 운영자 2010.10.18 2010.10.18 308
31 Table Template 1 - Simple basic table frame [2] 운영자 2010.02.27 2010.02.27 205
30 Complex table frame with Legend and Fieldset [2] 운영자 2010.05.10 2010.05.10 264
29 Basic Frame Templates - 기본 테두리, 사진 넣기 [2] 운영자 2010.02.27 2010.02.27 259
28 Basic Frame Templates - 좀 복잡한 이중 테두리 [1] 운영자 2010.02.27 2010.02.27 223
27 Basic Frame Templates - 단색 테두리와 배경 [1] 운영자 2010.02.27 2010.02.27 228
26 Basic Frame Templates - 진한 밖 테두리, 엷은색 배경 [1] 운영자 2010.02.27 2010.02.27 251
25 Basic Frame Templates - 단색 테두리와 단색 배경 [1] 운영자 2010.02.27 2010.02.27 202
24 Basic Frame Templates - 어두운 배경-밝은 글자 [1] 운영자 2010.02.27 2010.02.27 225
23 Basic Frame Templates - 다른색 테두리, 안테두리와 배경 [1] 운영자 2010.02.27 2010.02.27 189
» 참고 - Modified Music Player 운영자 2010.02.02 2010.02.02 116