Một bộ code cho tất cả - One For All

by carolinejudith Tue Sep 20, 2011 8:30 am

Toàn thể topic này có thể áp dụng cho 360Plus

Một bạn đã nhắn tin hỏi tôi 1 câu rất thú vị: "Cứ như bạn viết thì cứ 1 bài hát phải 1 code. Có bao giờ 1 code làm được cho tất cả không? Cả audio lẫn video, có thêm hình và không thêm hình, bài hát lẻ và nhiều bài. Có dược không? Nhiều code thì rối quá, không nhớ hết được. Mà tôi thì cũng lớn tuổi rồi. Mỗi lần muốn nhúng nhạc phải vào diễn đàn tìm nhiều bài của bạn, rất tốn thời gian. Xin bạn chỉ cho 1 cách nào làm được như thế. Nghĩa là chỉ cần 1 code mà làm được hết như tôi nói đó. Cảm ơn bạn. À, mà blog của tôi ở Blogspot, không phải Plus"

Trước tiên, tôi xin đáp ngay: Có. Tôi đã từng viết bài về code đó, nhưng các bài viết khá rời rạc. Vậy tôi tập trung tất cả vào 1 topic để bạn đỡ mất thời giờ tìm kiếm. Và bạn chỉ cần lưu 1 code mẫu thôi.

Bài 1: Flash nhúng nhạc đa năng

CẤP 1 - GIÁO KHOA

A- Code mẫu đa năng

1- Code để nhúng lên 360Plus

2- Code nhúng ngoài 360Plus

Ở trên là các code mà bạn sẽ khai thác trong toàn thể topic này.

B- Các tham số trong code mẫu:

MEDIAURL= đường dẫn file audio MP3, video MP4, video FLV, file playlist XML
&displayheight=yyy (chiều cao khung hiển thị hình, bạn có thể thay đổi cho tương xứng với height="YYY" width="XXX")
&backcolor=0x000000 (màu nền hệ thập lục phân, thay đổi 6 ký tự phía sau 0x)
&frontcolor=0xFFFFFF (màu chữ hệ thập lục phân, thay đổi 6 ký tự phía sau 0x)
&lightcolor=0x00FF00 (màu chữ hệ thập lục phân khi có chuột bên trên, thay đổi 6 ký tự phía sau 0x)
&showdigits=true (hiển thị số liệu, ngược lại là false)
&showeq=true (hiển thị cường độ âm thanh, ngược lại là false)
&showfsbutton=true (hiển thị nút điều khiển, ngược lại là false)
&autostart=false (chế độ tự động play, ngược lại là true)
&shuffle=true (chế độ ngẫu nhiên, ngược lại là false)
&repeat=false (lặp lại khi hết list, ngược lại là true)
&volume=100 (cường độ % âm thanh so với âm thanh gốc, bạn có thể thay đổi )
&logo=LOGOURL (đường dẫn logo, không dùng thì để trống). Logo là file ảnh jpg, gif, png. Nội dung logo có thể là chữ hoặc hình. Nếu logo chữ thì nên trong suốt (transparent) dạng GIF. Sẽ xuất hiện 1 trong 2 trường hợp:
* Nhúng vào Plus: Không hiện logo vì phải thông qua loader
* Nhúng ngoài Plus: Có logo
&height=500 (chiều cao logo, không dùng thì để trống, bạn có thể thay đổi cho tương xứng với height="yyy" width="xxx"). Cũng sẽ xuất hiện 2 trường hợp:
* Nhúng vào Plus: Hiện controlbar bên dưới player
* Nhúng ngoài Plus: Có thể cho ẩn controlbar
Chú ý: Khi copy/paste bạn cần kiểm tra và bảo đảm cho các tham số lền nhau, không để sót dấu cách (phím spacebar) nào.

C- Tạo code nhúng

Bạn nên đăng ký free account ở http://www.fileden.com để upload các file lên rồi lấy đường dẫn (File uploaded, URL:). Các link ấy sẽ được dùng để ghi chồng lên các chuỗi MEDIAURL và LOGOURL trong code mẫu.
Một bộ code cho tất cả - One For All Fileden-Reg1

Một bộ code cho tất cả - One For All Fileden-Reg1

Sau đó thực hiện theo thứ tự những thao tác cơ bản sau đây:

1- Ghi chồng đường dẫn bản nhạc lên chuỗi MEDIAURL trong code mẫu.
2- Nếu có lồng hình Nhập tham số displayheight cho tương xứng với hình
3- Nếu có lồng hình Nhập tham số height cho tương xứng với hình
4- Nếu có lồng hình Nhập height="yyy" width="xxx" sao cho hiển thị hợp lý và có xuất hiện playlist. Trường hợp XML chỉ có 1 bản nhạc, bạn có thể cho hoặc không cho xuất hiện playlist 1 bản nhạc. Nếu có nhiều hơn 1 bản nhạc thì nên cho xuất hiện playlist để người nghe tự chọn bản nhạc.
5- Ghi chồng đường dẫn logo lên chuỗi LOGOURL trong code mẫu.

Các bài kế tiếp sẽ hướng dẫn chi tiết cách khai thác player này.

-CAROLINE JUDITH-

by carolinejudith Tue Sep 20, 2011 8:38 am

Nhúng nhạc audio bằng đường dẫn MP3.

CẤP 1 - THỰC HÀNH 1

Ví dụ, nhúng bài MP3 Qua Cầu Gió Bay (Elvis Phương - Khánh Ly):
Đường dẫn http://www.fileden.com/files/2009/8/26/2555918/QuaCauGioBay.mp3
Đường dẫn logo: http://www.fileden.com/files/2009/8/26/2555918//CJ-logo.gif (107 x 13)

I- Soạn code

Cách thay đổi tham số trong code mẫu như sau:
1- Ghi chồng đường dẫn bản nhạc lên chuỗi MEDIAURL trong code mẫu
2- Ghi chồng đường dẫn logo lên chuỗi LOGOURL trong code mẫu, không dùng thì xóa chữ LOGOURL
3- Thiết lập các tham số
- height="52"
- &displayheight=52, đây là chiều cao khung display để đặt màn hình xem video và hiển thị logo.
- &height=52, chiều cao hiển thị logo. Khi 2 tham số này bằng nhau thì controlbar bị ẩm, chỉ hiển thị khi play hoặc có chuột bên trên display. Code này cho Logo nằm ở góc phải dưới khung display, bên dưới controlbar. Sau này nếu dùng logo hình, bạn phải thiết kế các tham số sao cho hình nằm lọt thỏm trong display.
- width="400" (tùy bạn, từ 150 đến 600). Khi dùng logo hình, bạn phải thiết kế các tham số sao cho hình nằm lọt thỏm trong display.

II- Code nhúng kết quả

1- Code để nhúng lên 360Plus

Player sẽ hiển thị như sau:

2- Code nhúng ngoài 360Plus

Player sẽ hiển thị như sau:

Bạn vừa tạo 1 code mẫu của riêng bạn vì có logo của bạn. Bạn có thể căn cứ vào code này để làm các nhiều code nhúng tương tự.

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Tue Sep 20, 2011 8:44 am

Nhúng clip video bằng đường dẫn MP4 / FLV.

CẤP 1 - THỰC HÀNH 2

Ví dụ, nhúng clip Đấu Trí (FLV):
Đường dẫn http://www.fileden.com/files/2009/8/26/2555918/Dautri.flv
Đường dẫn logo: http://www.fileden.com/files/2009/8/26/2555918//CJ-logo.gif (107 x 13)

I- Soạn code

Cách thay đổi tham số trong code mẫu như sau:
1- Ghi chồng đường dẫn clip video lên chuỗi MEDIAURL trong code mẫu
2- Ghi chồng đường dẫn logo lên chuỗi LOGOURL trong code mẫu, không dùng thì xóa chữ LOGOURL
3- Thiết lập các tham số:
- height="300" (căn cứ vào ratio màn hình video trước).
- &displayheight=280, đây là chiều cao khung display để đặt màn hình xem video và hiển thị logo. Phần còn lại để hiển thị controlbar và list.
- &height=290, Đây là chiều cao cho phép của logo. Phần10px còn lại để hiển thị controlbar. (Nếu không muốn hiển thị controlbar, bạn cho &height=300 || &displayheight=300 || height="300" . Khi ấy, controlbar tự ẩn, và xuất hiện khi play hặc có trỏ chuột bên trên khung display). Phần hiển thị logo bắt đầu từ góc phải dưới khung display tiến lên góc trái trên khung display.
Nhắc lại, nếu nhúng vào Plus thì mọi thiết kế dành cho logo sẽ không hiệu quả đồng thời sẽ controlbar sẽ xuất hiện.
- width="400" (căn cứ vào ratio màn hình video trước). Không dùng logo hình vì logo sẽ che lấp video.

II- Code nhúng kết quả

1- Code để nhúng lên 360Plus

Player sẽ hiển thị như sau:

2- Code nhúng ngoài 360Plus

Player sẽ hiển thị như sau:

Bạn vừa tạo 1 code mẫu của riêng bạn vì có logo của bạn. Bạn có thể căn cứ vào code này để làm các nhiều code nhúng tương tự.

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Tue Sep 20, 2011 2:57 pm

Học Viết XML

CẤP 2 - GIÁO KHOA

Bây giờ bạn sẽ làm nhạc bằng XML, là phương pháp mà các website chuyên nghiệp sử dụng.
Ở cấp 1 bạn nhúng nhạc bằng đường dẫn trực tiếp, mỗi player chỉ play 1 file và list nhạc không hữu dụng vì không hiện tên bản nhạc. Ở cấp này bạn nhúng nhạc gián tiếp thông qua 1 tập tin danh sách dạng XML. Mỗi player được play nhiều file và list sẽ hiện tên các bản nhạc. Bạn có thể thiết lập chế độ play ngẫu nhiên hoặc play theo série, chế độ play lặp lại hoặc play hết list thì thôi.
Từ nay bạn phải thực hiện 2 công đoạn
- Công đoạn viết XML rồi up lên host và lấy đường dẫn
- Công đoạn xử lý code mẫu

I- Đây là file XML mẫu

dòng 1 để khai báo tài liệu xml:
dòng 2 để khai báo thể loại playlist: (diễn đàn làm hỏng code này. Xin bạn viết thế như sau: playlist version="1" xmlns="http://xspf.org/ns/0/" rồi thêm dấu mở < và dấu đóng > cho thành thẻ html). Mỗi player chạy một thể loại khác nhau. Nếu khai báo sai, bạn có thể gặp rắc rối.
dòng 3 để khai báo mở đầu list:
dòng 4 để khai báo bắt đầu play track này:
dòng 5:
dòng 6:
dòng 7:
dòng 8:
dòng 9:
dòng 10 để khai báo ngưng play track này:
dòng áp chót để khai báo ngưng play list này:
dòng chót để khai báo kết thúc playlist:

Bạn soạn code trong chương trình thuần văn bản (như Notepad). Lưu với đuôi .xml (chấm xml). Lưu xong tập tin sẽ được mở trong trình duyệt bằng cách doubleclick. Tập tin mẫu hiển thị như sau:

Nếu muốn lưu tập tin mẫu để dùng lâu dài, bạn click đây: http://www.fileden.com/files/2009/8/26/2555918//template-onlymemusicvideoimagelist.xml

II- Cách viết XML

1- Mỗi bản nhạc là một track. Mỗi track được soạn thông tin ở 7 dòng bắt đầu từ thẻ (dòng 4) và kết thúc ở thẻ (dòng 10). Trong mỗi dòng, chỉ thay đổi phần text màu đen.
2- bạn có thể xóa bỏ dòng và dòng nếu muốn.
3- Không để dòng trống (nghĩa là các dòng phải khít nhau).
4- List có bao nhiêu bản nhạc thì soạn bấy nhiêu track. Nên viết chữ không dấu.
5- Bạn phải viết 3 dòng đầu và 2 dòng chót y nguyên như mẫu.
Thủ thật: nên soạn XML trong một chương trình thuần văn bản như Notepad để tránh mã định dạng kèm theo.
6- Upload lên host rồi lấy đường dẫn XML.
Ví dụ: File XML mà tôi sắp dùng có đường dẫn là http://www.fileden.com/files/2009/8/26/2555918/GiacMoTrua.xml, và nội dung trông như sau:

Nếu mở trong trình duyệt mà tập tin không giống thế hoặc xuất hiện thông báo Error thì bạn phải xem lại

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Tue Sep 20, 2011 3:10 pm

Lồng nhạc vào hình

CẤP 2 - THỰC HÀNH 1

Để tạo hình có lồng nhạc bạn phải làm 1 file XML

Ví dụ, bạn muốn làm cho nốt nhạc tấu Harmomica bài Giấc Mơ Trưa của Giáng Son
- Đường dẫn tập tin XML:
http://www.fileden.com/files/2009/8/26/2555918/GiacMoTrua.xml (hình thức nội dung thì bạn đã thấy trong bài trước)
- Đường dẫn tập tin hình nốt nhạc: http://images.yume.vn/photo/pictures/20100228/membserv/thumbnail/604x604/giacmotrua1_1848727276.jpg (465 x 604)
- Đường dẫn tập tin tấu nhạc : http://www.fileden.com/files/2009/8/26/2555918/GiacMoTrua-Harmonica.mp3

I- Soạn code

Cách thay đổi tham số trong code mẫu như sau:
1- Ghi chồng đường dẫn tập tin XML lên chuỗi MEDIAURL trong code mẫu
2- Ghi chồng đường dẫn logo lên chuỗi LOGOURL trong code mẫu, không dùng thì xóa chữ LOGOURL
3- Thiết lập các tham số:
- height="614" (+ 10 px chừa lề).
- &displayheight=614, đây là chiều cao khung display để đặt màn hình xem hình và hiển thị logo.
- &height=614, Đây là chiều cao cho phép của logo. Sẽ xuất hiện 1 trong 2 trường hợp:
* Nhúng vào 360Plus: Logo không hiển thị vì phải dùng flash tải vào Plus
* Nhúng vào webpage khác: Logo có hiển thị .
- width="475" (+ 10 px chừa lề).
Như thế, tất cả các tham số height và width đều theo hình rồi thêm 10.

II- Code nhúng kết quả

1- Code nhúng bản nhạc vào 360Plus sẽ là:

Player hiển thị như sau:

2- Code nhúng bản nhạc ngoài 360Plus sẽ là:

Player hiển thị như sau:

Bạn vừa tạo 1 code mẫu của riêng bạn vì có logo của bạn. Bạn có thể căn cứ vào code này để làm các nhiều code nhúng tương tự.

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Tue Sep 20, 2011 4:10 pm

Làm Player chạy list nhạc có hình cho mỗi bản nhạc

CẤP 2 - BÀI THỰC HÀNH 2

Một player chạy list nhạc mà mỗi bản nhạc được hiển thị một hình tương ứng là mức độ chuyên nghiệp khi bạn thực hành xong bài này.
Tôi sẽ soạn 1 file XML 3 track theo XML mẫu ở bài 4.
Đường dẫn file XML sắp dùng: http://www.fileden.com/files/2009/8/26/2555918//onlymemusicvideoimagelist.swf . Hiển thị trong trình duyệt của file này như sau:

I- Soạn code

Cách thay đổi tham số trong code mẫu như sau:
1- Ghi chồng đường dẫn tập tin XML lên chuỗi MEDIAURL trong code mẫu
2- Ghi chồng đường dẫn logo lên chuỗi LOGOURL trong code mẫu, không dùng thì xóa chữ LOGOURL
3- Thiết lập các tham số:
- height="353".
- &displayheight=300, đây là chiều cao khung display để đặt màn hình xem hình và hiển thị logo.
- &height=453, Đây là chiều cao cho phép của logo. Sẽ xuất hiện 1 trong 2 trường hợp:
* Nhúng vào 360Plus: Flash tải đã làm giao diện playlist và logo mất hiệu lực. Do đó cần cho tất cả "các height" = 353
* Nhúng vào webpage khác: Logo có hiển thị .
- width="453" .

II- Code nhúng kết quả

1- Code nhúng bản nhạc vào 360Plus sẽ là:

Player hiển thị:

Bạn cần lưu ý đến đặc điểm không thể hiển thị playlist trong Plus để quyết định sử dụng.
Nếu bạn có tài khoản pro ở Photobucket.com thì bạn có thể upload flash lên để nhúng trực tiếp vào Plus, nhờ đó, bạn có thể sử dụng code nhúng như nhúng ngoài Plus. Đường dẫn flash để bạn download là: http://www.fileden.com/files/2009/8/26/2555918//onlymemusicvideoimagelist.swf

2- Code nhúng bản nhạc ngoài 360Plus sẽ là:

Và player sẽ hiển thị như thế này:

Bạn vừa tạo 1 code mẫu của riêng bạn vì có logo của bạn. Bạn có thể căn cứ vào code này để làm các nhiều code nhúng tương tự.

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Tue Sep 20, 2011 5:28 pm

Trở về giao diện cổ điển

CẤP 3 - BÀI LÀM NGOẠI KHÓA

Sau khi đã đạt mức chuyên nghiệp nhúng nhạc lên web, bạn lại muốn đơn giản hóa giao diện player. Cụ thể, bạn muốn thế này:
- Khâu viết XML đơn giản tối đa, nghĩa là chỉ còn 4 dòng cho mỗi track.
- Chỉ hiển thị controlbar và logo
- Vẫn có thể tùy biến màu sắc cho list
2 yêu cầu sau sẽ không thực hiện được trên Plus dù player vẫn chạy đủ list nhạc. Ngoài Plus thì cả 3 yêu cầu đều thực hiện được.

Tất nhiên bạn sẽ viết XML rồi up lên host để lấy đường dẫn.
Đường dẫn XML: http://www.fileden.com/files/2011/8/4/3177804//classic-onlymemusicvideoimagelist.xml

Hiển thị XML trong trình duyệt như sau:

I- Soạn code

Cách thay đổi tham số trong code mẫu như sau:
1- Ghi chồng đường dẫn tập tin XML lên chuỗi MEDIAURL trong code mẫu
2- Ghi chồng đường dẫn logo lên chuỗi LOGOURL trong code mẫu, không dùng thì xóa chữ LOGOURL
3- Thiết lập các tham số:
- height="220".
- &displayheight=52, đây là chiều cao khung display để đặt màn hình xem hình và hiển thị logo.
- &height=220, Đây là chiều cao cho phép của logo. Sẽ xuất hiện 1 trong 2 trường hợp:
* Nhúng vào 360Plus: Flash tải đã làm giao diện playlist và logo mất hiệu lực.
* Nhúng vào webpage khác: Logo có hiển thị .
- width="250" .

II- Code nhúng kết quả

1- Code nhúng vào 360Plus sẽ là:
Cần lưu ý là Loader đã vô hiệu list và logo, cho nên height thu lại tối thiểu = 20 (cho mọi tham số). Còn width thì tùy ý (không nên nhỏ hơn 150)

Hiển thị như sau:

Nhược điểm: Dù player vẫn hát đủ list nhưng người nghe không thể chọn bản tùy thích.

2- Code nhúng ngoài 360Plus:

Player hiển thị:

Bạn vừa tạo 1 code mẫu của riêng bạn vì có logo của bạn. Bạn có thể căn cứ vào code này để làm các nhiều code nhúng tương tự.

Kết: Chỉ với 1 code mẫu ở bài 1 bạn đã tạo 5 code nhúng ở các bài 2, bài 3, bài 5 bài 6 và bài 7 đáp ứng cho những yêu cầu khác nhau. Khi dùng code nhúng vào Plus bạn cần cân nhắc giữa nhu cầu và đáp ứng của code để khai thác.

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Tue Sep 20, 2011 7:03 pm

Player với logo hình
CẤP 3 - BÀI LÀM NGOẠI KHÓA

Bài này KHÔNG hiệu lực trên 360Plus

Bạn muốn player một list nhạc có hiển thị logo bằng hình của bạn thì không thể thực hiện trong Plus được bởi loader đã vô hiệu logo. Đây là trường hợp mà bạn quyết định dựa trên cân nhắc giữa nhu cầu của bạn và đáp ứng của phương tiện trong môi trường hạn chế. Do đó, phương pháp trong bài này chỉ có thể áp dụng bên ngoài blog Yahoo.

- XML cần dùng: http://www.fileden.com/files/2011/8/4/3177804//classic-onlymemusicvideoimagelist.xml
- Đường dẫn Logo hình: http://www.hoasontrang.us/phorum/customavatars/avatar4475_1.gif (128 x 128)
Một bộ code cho tất cả - One For All Avatar4475_1

Một bộ code cho tất cả - One For All Avatar4475_1

I- Soạn code:

1- Ghi chồng đường dẫn tập tin XML lên chuỗi MEDIAURL trong code mẫu
2- Ghi chồng đường dẫn logo lên chuỗi LOGOURL trong code mẫu.
3- Thiết lập các tham số:
- height="310" là
- &displayheight=138, đây là chiều cao khung display để đặt màn hình xem hình và hiển thị logo. 128 + 10 (lề) = 138
- &height=310, Đây là chiều cao cho phép của logo.
- width="200" (theo chiều dài của dòng chữ trên list).

II- Code nhúng kết quả

Player hiển thị như sau:

Chúc bạn thành công

-CAROLINE JUDITH-

by Sponsored content

Một bộ code cho tất cả - One For All

Một bộ code cho tất cả - One For All

Bài 2: Nhúng nhạc audio bằng đường dẫn MP3

Bài 3 : Nhúng clip video bằng đường dẫn MP4 / FLV.

Bài 4: Viết XML

Bài 5: Lồng nhạc vào hình

Bài 6: Làm Player chạy list nhạc có hình cho mỗi bản nhạc

Bài 7: Trở về giao diện cổ điển

Bài 8: Player với logo hình

Re: Một bộ code cho tất cả - One For All