Air - True Mobile Air Guitar (Nguyên mẫu): 7 bước (có hình ảnh)

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:30

Được thôi, nếu vậy, Đây sẽ là một hướng dẫn thực sự ngắn về phần đầu tiên của việc cuối cùng tiến gần hơn đến giấc mơ thời thơ ấu của tôi.

Khi tôi còn là một cậu bé, tôi luôn theo dõi các nghệ sĩ và ban nhạc yêu thích của mình chơi guitar.

Khi lớn lên, tôi đã đủ biết ơn để học cách chơi guitar và thậm chí chơi một số loại do người khác sở hữu, nhưng vẫn chưa có cây đàn của riêng mình:(Vì vậy, cuối cùng tôi quyết định ngồi xuống và tạo ra một chiếc chạy hoàn toàn trên điện thoại, sử dụng thị giác máy tính và cho phép những người như tôi muốn có một cây đàn guitar nhưng có thể đang đi du lịch, bị hỏng hoặc quá trẻ để có được một cây đàn!

Bạn có thể tìm thấy ứng dụng nguyên mẫu tại trang web này

Để xem cách chơi, hãy chuyển đến Bước "Bạn đã hoàn tất".

* Đảm bảo sử dụng nó trên điện thoại của bạn và xoay ngang màn hình sang chế độ nằm ngang *

Thưởng thức!

(ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: * ヽ (◕ ヮ ◕ ヽ)

Quân nhu:

1. Điện thoại thông minh

2. Máy tính để bàn hoặc máy tính xách tay (Để lập trình)

Bước 1: Thông tin cơ bản và ghi chú về mã

Dự án này phần lớn là một dự án được mã hóa nhằm mục đích chạy hoàn toàn trên điện thoại.

Để thực hiện dự án này, tôi đã thử nhiều ứng dụng khác và tìm kiếm các thiết bị khác hiện có trên thị trường như đàn guitar AirJamz hoặc Kurv, đàn guitar cầm tay hoặc thậm chí ứng dụng Real Guitar trên cửa hàng chơi.

Những vấn đề tôi thấy thiếu ở nhiều người trong số họ là:

1. Một số thiết bị ngoại vi cần thiết

2. Hầu như tất cả các ứng dụng không thực sự cho phép bạn chơi hợp âm hoặc nhạc thực tế và chỉ là trình mô phỏng bảng phím đàn

3. Thiết bị bên ngoài khá đắt tiền và nhiều nghệ sĩ guitar khuyên bạn chỉ nên mua một cây đàn guitar thực tế

Đây là những hình ảnh trong các hình ảnh đi kèm.

Và vì vậy ứng dụng Air phải giải quyết những vấn đề này trong khi hoàn toàn có thể chạy trên điện thoại. Tôi tin rằng điều này là khả thi vì vào năm 2020, chúng ta có công nghệ trình duyệt di động tốt hơn nhiều và nhiều cải tiến trong thị giác máy tính có thể cho phép chúng ta làm nên điều kỳ diệu chỉ với một camera RGB.

Vì vậy, tôi đã tiến hành một số bản phác thảo về nó trông như thế nào và nó sẽ hoạt động như thế nào trước khi bắt đầu hoàn toàn.

Tôi cũng đã vẽ ra các mốc quan trọng về mã hóa của mình nên trong phần hướng dẫn này, thay vì khiến bạn nhàm chán với mã, tôi sẽ hướng dẫn bạn qua quy trình thiết kế của tôi và đính kèm mã chú thích ở cuối để bạn đọc và xem xét nếu bạn cần.

Toàn bộ mã có thể được tìm thấy tại https://github.com/msimbao/air và tôi khuyên bạn nên cấu trúc các tệp mã của mình tương tự như thế này.

Cũng lưu ý rằng để ứng dụng chạy, nó cần được lưu trữ. Cho đến nay tôi chỉ thấy nó chạy khi được lưu trữ trên github.:)

Bước 2: Hành động Strumming

Mốc mã hóa quan trọng đầu tiên là tìm ra cách sao chép một dàn kỹ thuật số mà không cần bất kỳ ngoại vi bên ngoài nào. Suy nghĩ ngay lập tức của tôi là sử dụng camera mặt trước RGB của điện thoại.

Tôi nghĩ rằng nếu một người có một hợp âm mà họ muốn chơi, thì khi họ vuốt tay trước máy ảnh, một âm thanh sẽ được phát ra.

Sau khi tìm ra điều đó, tôi cần một ngôn ngữ lập trình tốt có thể được sử dụng để giao tiếp tốt với máy ảnh RGB.

Tôi quyết định chọn Javascript vì tôi có thể tạo một ứng dụng đa nền tảng với React Native hoặc thứ gì đó khác hoặc chỉ có thể lưu trữ guitar trên một trang web và nó có thể khả dụng cho tất cả mọi người.

Sau đó, tôi đã tìm ra các cách khác nhau để tìm ra cách vuốt tay để kích hoạt một hành động có thể là phát âm thanh hợp âm nhưng có nhiều cách để làm điều này.

Máy học hoạt động rất tốt khi tôi dùng thử các dịch vụ của IBM và đào tạo khoảng 3000 hình ảnh trong một tuần để nhận dạng vuốt cũng như nhận dạng hợp âm. Tôi cũng đã thử dùng handtrack.js của supportsordibia. Thật không may, cả hai đều chậm đến mức khó tin trên điện thoại di động.

Sau đó, tôi tình cờ phát hiện ra chuyển động và một triển khai của alonekorean tại diffcam.com. Tôi biết được rằng có thể sử dụng webcam để ghi lại hai khung hình riêng biệt và sau đó tính toán sự khác biệt giữa các khung hình và cho điểm sự khác biệt. Nếu số điểm đó vượt quá một ngưỡng nhất định, thì tôi sẽ thực hiện một hành động.

Người đàn ông đơn độc cũng đã tạo ra một động cơ cho chiếc máy quay khác của anh ấy mà tôi quyết định sử dụng cho cây đàn Air và nó hoạt động hoàn hảo để giúp tôi có được điểm số chuyển động!

Đính kèm là những hình ảnh về nỗ lực đào tạo các mô hình Máy học cũng như ví dụ về diffcam.com mà tôi đã học được.

Lưu ý: Trong nguyên mẫu hiện tại này, việc gảy đàn lặp đi lặp lại nhiều lần, để dừng lại, chỉ cần giữ hợp âm bạn muốn chơi tiếp. Đây là một lỗi mà chúng tôi hy vọng sẽ khắc phục được.

Mã cho bản nhạc đầy đủ được tìm thấy trong tệp script.js được đính kèm ở đây và công cụ diffcam của alonekorean có ở đây.

Bước 3: Nhận dạng hợp âm

Mốc mã hóa tiếp theo sau đó là tìm cách xử lý trực tiếp nhận dạng hợp âm.

Tôi muốn người dùng có thể tái tạo các hình dạng hợp âm thực tế và do đó, thực hành vị trí đặt tay tốt và cũng giúp họ thực hành các hợp âm khác nhau.

Giống như trong bước cuối cùng, tôi đã thử Học máy để nhận dạng hợp âm, nhưng nó rất chậm trên điện thoại di động.

Sau đó, tôi đã học được điều gì đó từ ứng dụng Real Guitar rằng có thể đặt phím đàn trên màn hình điện thoại bằng cách sử dụng màn hình để tạo hình dạng hợp âm.

Sau đó, tôi phải học cách cho phép tương tác đa chạm trong javascript và tìm thấy một hướng dẫn và ví dụ tuyệt vời từ tài liệu của Mozilla

Tương tác chạm có thể phức tạp, đặc biệt là trong Javascript nhưng ý tưởng là chúng ta có thể tạo một số div nhất định và sau đó xác định các chức năng để xử lý các sự kiện chạm khác nhau:

1. touchStart: Khi ngón tay chạm vào màn hình

2. touchEnd: Khi ngón tay rời khỏi

3. touchMove: Khi ngón tay vẫn ở trên màn hình nhưng thay đổi vị trí

Sau đó, chúng tôi làm việc xung quanh các chức năng đó để xác định các yếu tố của riêng chúng tôi đáp ứng các sự kiện và kết hợp chạm khác nhau.

Trong trường hợp của chúng tôi, chúng tôi thiết kế một bảng phím đàn bằng CSS và sau đó sử dụng Javascript, nói với ứng dụng rằng khi một số div nhất định được nhấn lại với nhau, một hợp âm sẽ được nhận dạng.

Sau đó, chúng tôi có thể xác định một đối tượng âm thanh mà chúng tôi sẽ chuyển hợp âm đến và sau đó phát âm thanh đó khi một sự kiện vuốt xảy ra.

Để xác định các tổ hợp hợp âm khác nhau, tôi đã tạo bảng phím đàn bằng cách sử dụng hình ảnh này và sau đó chỉ cần đặt mỗi vị trí đặc biệt thành một div mà tôi có thể chạm và kết hợp với những người khác.

Mã để xác định sự tiến triển của hợp âm được tìm thấy ở đây và bộ điều khiển phím đàn được tìm thấy trong mã đính kèm.

Bước 4: Tìm âm thanh hợp âm

Bây giờ hệ thống của chúng tôi đã được thiết lập để nhận dạng, chúng tôi cần một số âm thanh hợp âm thực tế.

Rất may, freesound.com luôn hỗ trợ tôi khi tôi cần mẫu âm thanh. Tôi chỉ đơn giản là tìm kiếm các hợp âm và tìm thấy một gói hợp âm chính tuyệt vời của danglada.

Sau đó, tôi đã tải chúng xuống và chỉnh sửa chúng bằng cách sử dụng âm thanh để đảm bảo rằng âm thanh bắt đầu ngay lập tức thay vì tạm dừng ngắn ở phần đầu của hầu hết chúng khi chúng đang được ghi lại.

Để cắt chúng bằng cách sử dụng âm thanh, tôi chỉ cần kéo chúng vào ứng dụng, sau đó chọn phần âm thanh mà tôi muốn (toàn bộ phần lượn sóng và không phần nào trong số các phần đường phẳng không có âm thanh). Sau đó, tôi chuyển đến tab Chỉnh sửa> Xóa Đặc biệt> Cắt âm thanh. Sau đó, tôi vào tab Đường đi> Căn chỉnh Đường đi> Bắt đầu về 0. Sau đó, tôi đi tới tệp, rồi Xuất> Xuất dưới dạng WAV.

Tôi xuất dưới dạng WAV vì tôi thấy việc xử lý các dự án âm thanh Javascript dễ dàng hơn.

Sau đó, tôi đã sử dụng glitch.com để lưu trữ các tệp này vì chúng có một mạng phân phối nội dung tuyệt vời có thể được sử dụng cho các dự án khác nhau mà bạn có. Một lựa chọn khác có thể là sử dụng firebase, đây là công cụ của tôi cho các dự án khác nhau có thể có nhiều thông tin hơn để lưu trữ như ứng dụng kiểm kê không gian nhà sản xuất cho không gian nhà sản xuất của trường đại học của tôi.

Bạn chỉ cần kéo và thả tài sản vào thư mục dự án và sau đó bạn có thể tìm thấy một liên kết khi bạn nhấp vào thư mục tài sản và nhấp vào tài sản bạn muốn lấy. Sau đó, Glitch sẽ tạo ra một url CDN duy nhất cho nội dung của bạn. Ví dụ, đây là liên kết đến âm A major Chord.

Sau đó, tôi có thể liên kết tất cả các hợp âm này với nhau trong một chức năng getChord sẽ tìm kiếm khi một tổ hợp cụ thể của các vị trí phím đàn đã được nhấn và sau đó chỉ định một hợp âm thích hợp cho ứng dụng để chơi khi xảy ra sự kiện vuốt tay.

Bước 5: Hoàn thiện và lưu trữ toàn bộ ứng dụng

Có nhiều cách để sử dụng dịch vụ lưu trữ.

Thành thật mà nói, điều tốt nhất tôi tìm thấy chỉ đơn giản là sử dụng github. Điều này là do nếu bạn đã lập trình ứng dụng tốt, bạn có thể làm cho toàn bộ back end của mình được cung cấp bởi cơ sở dữ liệu hoặc cửa hàng cứu hỏa từ firebase hoặc thậm chí sử dụng CDN từ glitch.com và những nơi khác để lưu trữ nội dung.

Để lưu trữ dự án trên github, tất cả những gì bạn phải làm là mở tài khoản github, tạo một kho lưu trữ mới. Sau đó, để dễ thiết lập hơn, sau khi bạn đặt tên dự án của mình, hãy luôn đảm bảo thêm giấy phép (tôi không phải là chuyên gia nhưng tôi nhận thấy rằng điều đó giúp cuộc sống của tôi dễ dàng hơn). Tôi luôn chỉ sử dụng giấy phép công cộng như GNU.

Khi kho lưu trữ được thiết lập, chúng ta chỉ có thể kéo và thả các tệp của mình vào kho lưu trữ và nhấp vào nút cam kết màu xanh lá cây ở dưới cùng.

Sau đó, chúng tôi chuyển đến tab Cài đặt với biểu tượng bánh răng ở ngoài cùng bên phải của trang kho lưu trữ dưới dấu sao và nút xem. Khi ở trong phần cài đặt, hãy cuộn xuống cho đến khi bạn thấy hộp Trang Github. Thay đổi Nguồn thành nhánh chính và chọn một chủ đề nếu bạn muốn. Bạn có thể học cách sử dụng chủ đề bằng cách truy cập chúng (tôi không bao giờ sử dụng chúng vì tôi thường mang theo ý tưởng chủ đề và CSS của riêng mình).

Khi trang đã sẵn sàng, bạn sẽ nhận được đánh dấu màu xanh lá cây và đánh dấu cho biết rằng trang web của bạn đã được xuất bản và có thể được truy cập.

Bước 6: Xong

Giờ đây, bạn có thể tận hưởng một phiên giao dịch tuyệt vời trong sự thoải mái của tai nghe, phòng ngủ hoặc trên tàu của riêng bạn. Thêm một số hợp âm khác nếu bạn thích và thậm chí chơi xung quanh các vị trí phím đàn guitar.

Ghi chú nhanh về phát hiện chuyển động

1. Có thể điều chỉnh ngưỡng cho lần vuốt gảy guitar trong tệp script.js nhưng hãy đảm bảo rằng khi bạn đang sử dụng ứng dụng, nền mà điện thoại của bạn nhìn thấy tương đối tĩnh.

2. Ví dụ, trên tàu, tốt hơn hết bạn nên ngồi xuống, đeo tai nghe và quay điện thoại vào trong để nếu hành khách đang di chuyển xung quanh bạn, camera của điện thoại chỉ có thể nhìn thấy bàn tay bạn di chuyển hầu hết thời gian.

3. Bàn tay nắm chặt điện thoại cần tương đối tĩnh tùy thuộc vào ngưỡng của bạn. Tôi nghĩ rằng tôi sẽ chạy một số thử nghiệm với ngưỡng cao và cập nhật các giới hạn trong tương lai để cụ thể hơn.

Chơi:

Tải ứng dụng trên trình duyệt web của bạn, sau đó nghiêng ứng dụng sang chế độ ngang.

Sau đó, khi bạn vung tay, một hợp âm sẽ phát, tuy nhiên, nó sẽ tiếp tục phát cho đến khi bạn chạm vào phím F ở góc thấp nhất bên phải.

Ngoài ra, bạn có thể dừng âm thanh bằng cách kết hợp hợp âm.

Khi bạn thực hiện kết hợp hợp âm, âm thanh hiện tại sẽ dừng lại, sau đó âm thanh hợp âm mới sẽ được chọn.

Bước 7: Những điều đã học và những từ cuối cùng

Tôi thực sự thích làm việc với dự án này ngay cả khi phải mất nhiều thời gian để tạo nguyên mẫu và sản xuất ứng dụng trong khi làm việc trên các dự án khác và công việc tại nhà. Tôi cũng đã học được một vài điều tuyệt vời trong suốt quá trình đó;

1. Khi thiết kế các sản phẩm kỹ thuật số, hãy luôn đảm bảo tạo ra nguyên mẫu của bạn nhanh nhất có thể vì những giả định đầu tiên của bạn sẽ sai và bạn cần phải thực hiện nhanh chóng để đi đến kết thúc.

2. Tránh tiêu tiền vào một dự án càng nhiều càng tốt. Luôn sử dụng lại bất cứ thứ gì bạn có thể và luôn bắt đầu với những thứ đơn giản bạn có trong tay.

3. Đừng ngại học ngôn ngữ, khuôn khổ và hệ thống mới. Chúng thường dễ dàng hơn bạn nghĩ lúc đầu.

Và rất cảm ơn cô gái đã biến ước mơ của tôi thành hiện thực

Nếu bạn quan tâm đến cách ứng dụng phát triển, bạn có thể tham gia danh sách gửi thư của chúng tôi. Một nhóm nhỏ và tôi sẽ làm việc để tạo ra một phiên bản đầy đủ để giúp những người bị hỏng, đang đi du lịch hoặc trẻ nhỏ có thể tiếp cận với một cây đàn guitar di động tuyệt vời dù họ ở đâu.

Chúng tôi thực sự muốn được một số trợ giúp đặc biệt là từ các nhà thiết kế đồ họa, người chơi guitar và lập trình viên để kiểm tra và xác định mọi thứ.

Thưởng thức (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: * ヽ (◕ ヮ ◕ ヽ)