ผู้เขียน หัวข้อ: ★ วิธีนำไฟล์ MP3 มาเปิดให้สมาชิกฟัง ★  (อ่าน 390 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ PoseidoN

  • ♣ ♦ ♥ ♠ ♠ ♥ ♦ ♣
  • Uploader
  • ****
  • Thank You
  • -Given: 424
  • -Receive: 1775
  • กระทู้: 1804
  • ☆★ Not a Big Deal ★☆
★ วิธีนำไฟล์ MP3 มาเปิดให้สมาชิกฟัง ★
« เมื่อ: เมษายน 17, 2016, 02:06:18 AM »
สวัสดีครับสมาชิกทุกๆ ท่าน

หลายคนอาจจะเคยลองฟังเพลงในกระทู้ที่ผมเคยโพสไปบ้าง แล้วอาจสงสัยว่าทำอย่างไร บางคนก็อาจจะอยากเอาไฟล์ mp3 มาเปิดให้ฟังเหมือนผมบ้าง หากใครนึกตัวอย่างไม่ออก ลองดูข้างล่างนี้นะครับ


<a href="http://medsai.net/webboard/song/music_player.swf?soundFile=http://medsai.net/webboard/song/Chojin%20Sentai%20Jetman%20OP.mp3&amp;left=cdff5b&amp;leftbg=a3cb46&amp;rightbg=ebebeb&amp;rightbghover=00b3e8&amp;loader=000000&amp;tracker=cdff5b&amp;track=6fd8ff&amp;border=ffffff&amp;bg=d1d0d1&amp;lefticon=ffffff&amp;righticon=00b3e8&amp;voltrack=FF0000&amp;volslider=0000FF&amp;initialvolume=100&amp;text=cc3c00&amp;loop=yes&amp;remaining=yes&amp;titles=Jetman" target="_blank" class="new_win">http://medsai.net/webboard/song/music_player.swf?soundFile=http://medsai.net/webboard/song/Chojin%20Sentai%20Jetman%20OP.mp3&amp;left=cdff5b&amp;leftbg=a3cb46&amp;rightbg=ebebeb&amp;rightbghover=00b3e8&amp;loader=000000&amp;tracker=cdff5b&amp;track=6fd8ff&amp;border=ffffff&amp;bg=d1d0d1&amp;lefticon=ffffff&amp;righticon=00b3e8&amp;voltrack=FF0000&amp;volslider=0000FF&amp;initialvolume=100&amp;text=cc3c00&amp;loop=yes&amp;remaining=yes&amp;titles=Jetman</a>

จากตัวอย่างนี้ ผมใช้โค้ดนี้ครับ (ขอ censor นิดส์นุงนะครับ)

โค๊ด: [Select]
[flash=500,24]http://medsai.net/webboard/song/music_player.swf?soundFile=http://audio.chirbit.com/Song001.mp3&leftbg=a3cb46&rightbg=ebebeb&rightbghover=00b3e8&loader=000000&tracker=cdff5b&track=6fd8ff&border=ffffff&bg=d1d0d1&lefticon=ffffff&righticon=00b3e8&voltrack=FF0000&volslider=0000FF&initialvolume=100&text=cc3c00&loop=yes&remaining=yes&titles=ชมรมขนหัวลุก - รัดเกล้า[/flash]
(ผมขึ้นบรรทัดใหม่ เพื่อให้ดูง่ายขึ้น)
โค๊ด: [Select]
[flash=500,24]http://medsai.net/webboard/song/music_player.swf?
soundFile=http://audio.chirbit.com/Song001.mp3
&leftbg=a3cb46
&rightbg=ebebeb
&rightbghover=00b3e8
&loader=000000
&tracker=cdff5b
&track=6fd8ff
&border=ffffff
&bg=d1d0d1
&lefticon=ffffff
&righticon=00b3e8
&voltrack=FF0000
&volslider=0000FF
&initialvolume=100
&text=cc3c00
&loop=yes
&remaining=yes
&titles=ชมรมขนหัวลุก - รัดเกล้า[/flash]


ขออธิบายคร่าวๆ ว่า ผมนำไฟล์ swf ตัวหนึ่งมาทำหน้าที่เป็นตัวเล่นไฟล์ mp3 ครับ เป็นไฟล์ mp3 ที่มาจากเว็ปใดๆ นะครับ หมายความว่า เราต้องมี link ของไฟล์ mp3 ก่อน เช่น http://www.abc123.com/Song001.mp3 ซึ่งถ้าไม่มี เราก็ต้องหาที่ฝากไฟล์ก่อนครับ เอาที่ที่เราสามารถหาลิงค์ .mp3 ได้นะครับ ถ้าเป็นหน้าตาประมาณ http://www.abc123.com/Song001_Ex แบบนี้ก็จะใช้ไม่ได้นะครับ

และตัวพระเอกที่ผมพูดถึงก็คือ ตัวนี้ครับ http://medsai.net/webboard/song/music_player.swf

วิธีนำพระเอกมาใช้ก็แค่

โค๊ด: [Select]
[flash=500,24]http://medsai.net/webboard/song/music_player.swf[/flash]
500 คือ ความกว้าง และ 24 คือ ความสูง คุณสามารถปรับค่าต่างจากตัวอย่างนี้ได้ ที่ผมเลือกค่านี้ เพราะผมเห็นว่ามันจะได้หน้าตาที่สวยงามกำลังดีครับ

แต่ว่าข้อมูลเพียงแค่นี้ มันก็จะได้แค่โครงเปล่าๆ ครับ ซึ่ง swf ตัวนี้มันยังไม่รู้เลยว่าต้องไปเล่น mp3 ไฟล์ไหน แล้วสีสีนของมันจะต้องมีประมาณไหน ฉะนั้นเราต้องส่งข้อมูลให้มันครับ เตรียมตัวให้ดีนะครับ ข้อมูลต่อไปนี้อาจทำให้คุณปวดหัวได้ แนะนำทานยาพาราก่อน 2 เม็ด :baby: (แต่ถ้าคุณมีความรู้ด้านเขียนโปรแกรมมาบ้าง เรื่องนี้ก็แค่ขี้แมวครับ)



การส่งข้อมูล ก็ไม่มีอะไรยากครับ มีกฏแค่ว่า ข้างหน้าข้อมูลแรก ต้องนำหน้าด้วย ? และถ้าต้องส่งข้อมูลถัดๆ ไป ต้องคั่นด้วย & เสมอ ตัวอย่างเช่น...

<a href="http://medsai.net/webboard/song/music_player.swf?soundFile=http://medsai.net/webboard/song/Chojin%20Sentai%20Jetman%20OP.mp3&amp;remaining=yes&amp;titles=เจ็ทแมน" target="_blank" class="new_win">http://medsai.net/webboard/song/music_player.swf?soundFile=http://medsai.net/webboard/song/Chojin%20Sentai%20Jetman%20OP.mp3&amp;remaining=yes&amp;titles=เจ็ทแมน</a>

จะได้ตัวเล่นเพลงหน้าตาง่ายๆ มาอันหนึ่ง โดยผมใช้ code นี้ครับ

โค๊ด: [Select]
[flash=500,24]http://medsai.net/webboard/song/music_player.swf?soundFile=http://audio.chirbit.com/Song001.mp3&remaining=yes&titles=ชมรมขนหัวลุก - รัดเกล้า[/flash]
โค๊ด: [Select]
[flash=500,24]http://medsai.net/webboard/song/music_player.swf?
soundFile=http://audio.chirbit.com/Song001.mp3
&remaining=yes
&titles=ชมรมขนหัวลุก - รัดเกล้า[/flash]

swf ตัวนี้สามารถทำอะไรได้
  • เล่นไฟล์ mp3 ชื่อ Song001
  • กำหนดให้แสดงเวลาแบบย้อนหลัง (เวลาที่เหลือ)
  • ใส่ชื่อ title ว่า ชมรมขนหัวลุก - รัดเกล้า




ข้อมูลที่เราสามารถส่งได้
  • soundFile=ที่อยู่ไฟล์ mp3
  • titles=ข้อความที่ต้องการแสดง
  • text=ค่าของสี >> สีของข้อความ
  • leftbg=ค่าของสี >> สีพื้นหลัง (ซ้าย)
  • rightbg=ค่าของสี >> สีพื้นหลัง (ปุ่ม Play)
  • rightbghover=ค่าของสี >> สีพื้นหลังปุ่ม Play เมื่อเมาส์ชี้
  • righticonhover=ค่าของสี >> สีปุ่ม Play เมื่อเมาส์ชี้
  • loader=ค่าของสี >> สีของแถบโหลดไฟล์จากลิงค์
  • tracker=ค่าของสี >> สีของแถบ ขณะเล่นไฟล์
  • track=ค่าของสี >> สีของแถบพื้นหลังตัวอักษร
  • border=ค่าของสี >> สีของกรอบ รอบตัวหนังสือ
  • bg=ค่าของสี >> สีของพื้นหลัง ของไฟล์ swf
  • lefticon=ค่าของสี >> สีของไอคอน ลำโพง
  • righticon=ค่าของสี >> สีของไอคอน Play
  • voltrack=ค่าของสี >> สีของแถบระดับเสียง (หรี่เสียง)
  • volslider=ค่าของสี >> สีของแถบระดับเสียง (เร่งเสียง)
  • skip=ค่าของสี >> สีของปุ่ม skip
  • initialvolume=ค่าระหว่าง 0 - 100 >> ระดับความดังเริ่มต้น
  • loop=yes หรือ no >> เล่นไฟล์ซ้ำ
  • remaining=yes หรือ no >> แสดงเวลาแบบย้อนกลับ
  • autostart=yes หรือ no >> เล่นไฟล์ทันทีที่โหลดเสร็จ

เห็นข้อมูลสามารถส่งได้เยอะ ก็ไม่ต้องตกใจ ไม่จำเป็นต้องใช้ทั้งหมดครับ แต่ห้ามขาด soundFile= แค่นั้นเป็นพอ เพราะข้อมูลอื่นๆ ส่วนใหญ่เกี่ยวกับสีสัน ถ้าเราไม่ได้ส่งไป มันก็จะใช้ค่ามาตรฐานที่ถูกกำหนดมาก่อนอยู่แล้วครับ มะต้องห่วง

อยากส่งค่าไหน ก่อน-หลัง ไม่มีปัญหาครับ เอาที่เราสบายใจได้เลย  :baby:



ส่วนเรื่องค่าของสี จะอยู่ในรูปเลขฐาน 16 (ค่า 0-255 แทนด้วย 00-FF) เรียงกัน 6 ตัว เป็นตัวแทนของ สีแดง สีเขียว สีน้ำเงิน เช่น cc0f98 >> ความเข้มสีแดง คือ cc [ฐาน 16] = 204 [ฐาน 10], ความเข้มสีเขียว 0f = 15, ความเข้มสีน้ำเงิน 98 = 152 >> ผสมกันออกมาเป็นสี cc0f98

เรื่องสีนี้ใครไม่เคยเรียนด้านคอมพิวเตอร์อาจจะปวดหัวซักหน่อย เอาเป็นว่าอยากได้สีไหนก็ลองดูจากเว็ปนี้ก็ได้ครับ เลือกเอามาใช้เลยไม่ต้องปวดหัวศึกษาทำความเข้าใจ อิอิ


สุดท้ายแล้ว ก็อยากจะบอกว่า หากเรามี mp3 หลายไฟล์เราก็สามารถนำมาเปิดใน swf ตัวเดียวได้เลยนะครับ โดยจะใช้ comma (,) คั่น ใน soundFile กับ titles (แค่ 2 อันนี้เท่านั้น) ได้ เช่น

http://medsai.net/webboard/song/music_player.swf?soundFile=http://audio.chirbit.com/Song001.mp3,http://audio.chirbit.com/Song002.mp3&remaining=yes&titles=เพลงที่ 1, เพลงที่ 2

แล้วเราจะได้ swf ที่ดูภายนอก จะมีหน้าตาเหมือน swf ที่เล่น 1 ไฟล์แหละครับ ต่างตรงที่เวลาเล่นไฟล์ mp3 เราจะเห็นปุ่ม skip โผล่มา 2 ปุ่ม ซ้าย-ขวา สำหรับข้ามไปเล่นไฟล์ถัดไป กับสำหรับย้อนกลับไปเล่นไฟล์ก่อนหน้าครับ แล้วหากเราส่งคำสั่ง loop (loop=yes) ไปด้วย การเล่นซ้ำ จะทำงานเมื่อไฟล์สุดท้ายจบลงครับ



ผมจะทำตัวอย่างให้ดูนะครับ เป็นการปิดท้าย สมมติว่าผมต้องการ swf ที่สามารถ...
  • เล่น mp3 จำนวน 2 ไฟล์
  • ให้วนซ้ำ เมื่อจบไฟล์ที่ 2
  • แสดง title ทั้ง 2 ไฟล์
  • แสดงเวลาแบบถอยหลัง
  • กำหนดให้ระดับเสียงเริ่มต้นที่ 60%
  • ไอคอนลำโพงมีสี cc180f
  • ไอคอน Play มีสี bebb1e
  • แถบสีขณะเล่นไฟล์ มีสี 1ebe6b
  • ตัวหนังสือสี a22abb
  • แถบตอนเร่งเสียง มีสี 78e750

ผมจะต้องใช้ code ว่า

โค๊ด: [Select]
[flash=500,24]http://medsai.net/webboard/song/music_player.swf?soundFile=http://audio.chirbit.com/Song001.mp3,http://audio.chirbit.com/Song002.mp3&lefticon=cc180f&righticon=bebb1e&initialvolume=60&text=a22abb&tracker=1ebe6b&volslider=78e750&loop=yes&remaining=yes&titles=Song001, Song002[/flash]
โค๊ด: [Select]
[flash=500,24]http://medsai.net/webboard/song/music_player.swf?
soundFile=http://audio.chirbit.com/Song001.mp3, http://audio.chirbit.com/Song002.mp3
&lefticon=cc180f
&righticon=bebb1e
&initialvolume=60
&text=a22abb
&tracker=1ebe6b
&volslider=78e750
&loop=yes
&remaining=yes
&titles=Song001, Song002[/flash]



<a href="http://medsai.net/webboard/song/music_player.swf?soundFile=http://medsai.net/webboard/song/Chojin%20Sentai%20Jetman%20OP.mp3,http://medsai.net/webboard/song/Kyoryu%20Sentai%20Zyuranger%20OP.mp3&amp;lefticon=cc180f&amp;righticon=bebb1e&amp;initialvolume=60&amp;text=a22abb&amp;tracker=1ebe6b&amp;volslider=78e750&amp;loop=yes&amp;remaining=yes&amp;titles=เจ็ทแมน, จูเรนเจอร์" target="_blank" class="new_win">http://medsai.net/webboard/song/music_player.swf?soundFile=http://medsai.net/webboard/song/Chojin%20Sentai%20Jetman%20OP.mp3,http://medsai.net/webboard/song/Kyoryu%20Sentai%20Zyuranger%20OP.mp3&amp;lefticon=cc180f&amp;righticon=bebb1e&amp;initialvolume=60&amp;text=a22abb&amp;tracker=1ebe6b&amp;volslider=78e750&amp;loop=yes&amp;remaining=yes&amp;titles=เจ็ทแมน, จูเรนเจอร์</a>

ค่อยๆ ลองศึกษาดูนะครับ ไม่ยากเลยซักนิด ผมแค่ดันเขียนละเอียดไปหน่อย  :baby: ตัวหนังสือก็เลยเยอะไปซักนิดส์




ออฟไลน์ โนบุนากะ

  • ประธาน
  • *****
  • Thank You
  • -Given: 10177
  • -Receive: 35142
  • กระทู้: 9971
  • เพศ: ชาย
  • ผู้ยิ่งใหญ่แห่งคันโต
Re: ★ วิธีนำไฟล์ MP3 มาเปิดให้สมาชิกฟัง ★
« ตอบกลับ #1 เมื่อ: เมษายน 17, 2016, 02:10:55 AM »
หากอ่านผ่านๆ ปวดกระบาน

คงต้องค่อยๆ ลองแกะคอร์ดดู อิ อิ



ละเอียดน่ะดีแระ คนจะได้เข้าใจ

อย่าลืมแวะเข้ามาดูด้วยนะ เผื่อมีคนมาถาม   :wuubb:
"หากจะรัก ต้องลืมคำว่า เสียใจ"
Love means never having to say you’re sorry.