การใส่เพลงลงในบลอค

posted on 16 Feb 2007 18:15 by jennessa in Design

วันนี้เรามาดูการใส่เพลงลงในบลอคกันค่ะ

1. เราต้องมีไฟล์เพลงที่ต้องการใส่ลงในบลอคก่อนนะคะ ซึ่งส่วนใหญ่ทุกคนคงจะมีเป็นไฟล์ .mp3 หรือ .wma นำไฟล์เพลงไป upload ไว้ตามเวบที่รับฝากไฟล์ก่อนนะคะ (file hosting) เพื่อจะให้ได้ URL ของไฟล์เพลงนั้นมา ดูวิธีการ upload ไฟล์ได้ที่บลอคของป้ามดค่ะ Click

แต่โดยส่วนตัวแล้ว ตอนนี้ยังหาเวบรับฝากไฟล์ที่ถูกใจไม่ได้เลยค่ะ บังเอิญไปเจอเวบที่แจก URL เพลง คือเวบ GetCode มีช่องให้ค้นหาเพลงที่ต้องการด้วยค่ะ หรือเมื่อเข้าไปหน้าแรกแล้ว ให้เข้าไปที่เมนู "รายชื่อเพลง" จากนั้นกดเลือกเพลงที่ต้องการค่ะ ดังรูป

GetCode

2. Copy URL ในช่องสี่เหลี่ยมในกรอบแดงเก็บไว้ก่อนค่ะ อันนี้คือ URL ของเพลง

3. มาดูโค้ดใส่เพลงกันค่ะ

มาดูการกำหนดค่าในแต่ละ attribute กันนะคะ

src: บริเวณที่ไฮไลท์ไว้ ให้ใส่ URL ของเพลงค่ะ (URL จากข้อ 2)
width: กำหนดความกว้างของ Window Media Player
height: กำหนดความยาวของ Window Media Player
autostart: true ถ้าต้องการให้เพลงเล่นทันทีเมื่อเข้ามาในเวบ / false เพลงจะเล่นต่อเมื่อผู้ใช้กดปุ่ม play ก่อน
loop: true เล่นเพลงวนไปเรื่อย ๆ / false เล่นเพลงครั้งเดียว / n ใส่ตัวเลขจำนวนครั้งที่จะให้เพลงวน
showstatusbar: true แสดง status bar / false ไม่แสดง status bar (status bar คือ แถบสีดำล่างสุดที่แสดงข้อมูลเกี่ยวกับเพลง เช่น ชื่อเพลง เวลา สถานะ เป็นต้น)
volume: กำหนดความดังของเพลง สามารถใส่ตัวเลข 0 - 100 ค่า default ของ Window คือ 50 ค่ะ

4. หลังจากกำหนดค่าต่าง ๆ เรียบร้อยแล้ว ให้นำโค้ดไปใส่ตอนเขียนบลอค โดยกดปุ่ม ก่อนค่ะ เพื่อเข้าสู่ HTML Mode จากนั้นใส่โค้ดลงไป แล้วกดปุ่ม อีกทีค่ะ จะเห็น Window Media Player ขึ้นในหน้าเขียนบลอคแล้วค่ะ แล้วก็ Publish ได้เลยยย

5. เสร็จแล้วค่ะ แค่นี้ก็มีเพลงเพราะ ๆ ฟังในบลอคของคุณแล้วค่ะ (^ ^)V

ข้อแนะนำ (ความเห็นส่วนตัว)

ควรกำหนดค่า autostart เป็น false เพื่อให้ผู้ใช้ตัดสินใจเองว่า จะฟังเพลงนี้รึป่าว เป็นการลดเวลาในการโหลดด้วยค่ะ
ถ้าต้องการให้เพลงเล่นวนไปเรื่อย ๆ ควรกำหนดค่า loop เป็นจำนวนครั้งที่ต้องการให้เพลงเล่นที่แน่นอน
ควรกำหนดค่า showstatusbar เป็น true เพื่อให้ผู้ใช้ทราบสถานะของเพลง เช่น เพลงกำลัง Buffer อยู่กี่เปอร์เซนต์

อดทนเวลาที่แก้ CSS ... อย่างน้อยก็ทำให้เราได้เห็นถึงความแตกต่าง :D

Tags: add music, blog, code, embed, embed code, music, song40 Comments

บล็อกน่ารักจัง มีเรื่องดีๆ เพียบ งั้นขอ add ไว้นะคะ

#1 By GOPGAP on 2007-02-16 18:36

ความรู้ใหม่อีกแล้ว อิอิ

#2 By ♂ on 2007-02-16 18:50

เจ๋งดี

#3 By Piiiiim to Jin on 2007-02-16 19:44

ขอบคุณนะค้า~~^ ^

รักเจนเนสซ่าที่ซู้ดเล้ย~~

#4 By Eámanë of Shadowless on 2007-02-16 20:10

งัมๆๆ ละเอียดดีจังแฮะ

#5 By worapoj@~@ on 2007-02-16 20:38

ให้ความรู้ได้ดีจังนะคะ
เป็นบล็อกที่น่าสนใจทีเดียว

#6 By @-*- YaDa -*-@ on 2007-02-16 21:17

thanks krab

#7 By karaveak on 2007-02-16 21:36

ขอบคุณครับ แต่ผมเองก็ยังหาที่ฝากเพลงถูกใจไม่ได้เหมือนกัน

#8 By ลอท on 2007-02-16 22:55

ได้บล็อกมีเพลงกันอีกเยอะแน่เลย

#9 By นายบวก on 2007-02-16 23:09

ยังหาที่ฝากเพลงที่ถูกใจได้ค่อยได้เหมือนกัน

ไว้จะนำไปฝากไว้ในเวปที่แนะนำดูนะค่ะ

#10 By ^__^ต้นตาล^0^ on 2007-02-17 15:08

บลอกเนื้อหาเยอะดี แอ๊ดไว้อ่านนะ

ซินเจียยู่อี่ ซินนี้ฮวดไช้....ขอให้มีความสุขมากๆนะครับ

#11 By wut on 2007-02-17 20:02

ขอบคุณมากๆครับ

ขออณุญาตก๊อปลง blog ผมหน่อยนะครับ

แล้วผมจะทำเครดิตเป็นลิ้งค์มาที่นี่นะครับ

#12 By jojo.user on 2007-02-17 21:30

โอ๊ะ...

ในที่สุดก้อรู้แล้ว

ขอบคุณฮะ

#13 By HimaZ on 2007-02-18 18:29

แอดนะคะ สาระดีมากๆเลย

#14 By Pleng on 2007-02-18 19:39

oh! สวยมากค่า เดี๋ยวสอบเสร็จจะมาขอคำแนะนำนะคะ ท่านอาจารย์(เรียกอาจารย์ซะแล้ว) วันนี้แวะมาดู แล้วจะมาหา ขอบคุณค่า^^

#15 By เครติสจ้า^^ on 2007-02-24 17:56

ขอบคุณมากครับ ผมหาวิธีใส่้เพลงในบล็อกตั้งนาน

#16 By หมาดำ (58.9.26.6) on 2007-02-28 19:53

ขอบคุฯมากเลยค่ะ

แล้วก้อขอบคุณอีกครั้งสำหรับสกอบาร์ในบลอกนะค่ะ

ตอนนี้ทามสำเร็จแล้วค่ะ

ขอบคุณจิงๆค่ะ

#17 By (¯`ﻬஐ YuNhO ,, 이세철 ஐ´¯) on 2007-03-04 22:27

พี่เจนคะคือว่ารูปบนแบคกราวยังไม่เหนขึ้นเลยอ่าไม่เข้าใจว่าทำไมเหมือนกันอะคะแต่หนูเหนสีชมพูแล้วนะคะ ขอบคุนพี่เจนนคะ อีกเรื่องอะคะพี่เจนคือว่าหนูอยากเอาเพลงใส่ให้บลอกโคดที่หนูเขียนถูกมั้ยคะ <><embed name="objMediaPlayer"
pluginspage="http://www.microsoft.com/Window/MediaPlayer/"
src="http://www.esnips.com/doc/bbaf6fe5-1e9c-4476-ab42-1b780fec16db/01-Choking-Day"width="300"height="47"type="application/x-mplayer2"autostart="false"loop="fasle"showstatusbar="true" /> </embed /><>
แล้วขั้นที่สี่อะคะที่บอกว่าให้กดปุ่ม <> vอะคะไม่ค่อยเข้าใจเท่าไหร่คะงงช่วยอธิบายให้หน่อยนะคะขอบคุนมากคะพี่เจน

#18 By babie_moon on 2007-03-07 00:13

พี่เจนคะ code
.site{
margin:10px;
padding:0px;
text-align:center;
background-color: #FF99CC;
background-image:url
(http://imgserv2.imagehigh.com/imgss/5284254_13vbv.jpg);
background-repeat:repeat;
background-position:center;
}
แล้วทำไมแบคกราวยังไม่ขึ้นอะคะ คือถ้ามันไม่ขึ้นอีกก้อจะไม่ถามแล้วอะคะเกรงใจพี่เจนจังเหมือนเซ้าซี้เหมือนจะเอาให้ได้อะคะ โทดทีนะคะแล้วก้อีกอย่างอะคะพี่เจนทำไมเพลงในบลอกถึงเปิดไม่ได้อะคะมัน connect ตลอดเวลาอะคะ มันเกี่ยวกับลิ้งเพลงหรือเป่าคะพี่เจน

#19 By babie_moon on 2007-03-07 03:03

#20 By babie_moon on 2007-03-07 03:04

ขอบคุณที่ให้ความรู้ ขออนุญาตแอดบลอคคะ