웹페이지로 엔젤이 수다펜 만들기

주말이라고 토이저러스에 놀러갔는데 사고 싶은게 없냐고 물어보니 사고 싶은게 없다고 해서 집으로 오려는데 오는 길에서 수다펜이 사고 싶다고 하는겁니다.

토이저러스에서 말했으면 사줬을것 같은데 인터넷으로 판매하는걸 보니 매장에서 사는것보다는 싼것 같아서 일단은 나중에 인터넷으로 사준다고 하고 집으로 왔는데 프로그램을 하는 사람으로서 웹페이지로 만들어주면 어떨까 하는 생각에 급하게 만들어 봤습니다.

개발 환경은 django인데 이번 페이지는 django와는 상관은 없고 웹서버 띄우는 용도로만 사용했습니다.

Html 코드는 아래와 같이 만들었습니다.

스타일 시트 부분
배경화면이 되는 이미지를 div 태그에 넣기 위해 back_ground 라는 이름으로 id를 만듭니다.
그리고 버튼을 클릭하면 나오는 audio tag는 화면에서 보이지 않게 숨겨두었습니다.



body 안에는 div 태그로 아래와 같이 작성합니다. 버튼을 클릭시 소리가 나오도록 input type에 button으로 작성하고 onClick시 EvalSound 함수를 작성합니다. input class는 bootstrap을 이용하여 버튼을 표시한 것이고 필요없으면 삭제해도 됩니다.



가중 중요한 소리 파일입니다. audio 태그는 Html의 마지막 부분에 추가로 넣으면 됩니다.
오디오 파일의 경우는 마이크가 없어서 스마트폰에서 음성녹음을 하고 녹음된 파일을 PC에 저장하였습니다.
버튼을 클릭시 수행할 자바스크립트입니다.
EvalSound는 audio 태그를 찾아서 play를 실행해주는 함수이고
randSound는 등록된 audio중 랜덤으로 소리를 실행해주는 함수이다.


실제로 구현된 화면입니다. 수다펜은 아니지만 어차피 원리는 비슷하니까요.
웹으로 구현을 해주니 좋아하네요. 그래도 수다펜은 사달라고 합니다 ^^



댓글

댓글 쓰기

이 블로그의 인기 게시물

dtsrun 실행하기

Store Procedure 로 수행하기 아래와 같이 명령문을 입력한다 S는 서버명 N은 패키지 명입니다. 슬래시 뒤에 물결표(~)가 있는 글자(예:  /~Z )는 매개 변수 값이 암호화되어 있고 뒤에 오는 값이 암호화된 값의 16진수 텍스트라는 것을 지정합니다 자세한 내용은 아래에 있는 MSDN 내용을 참고하시기 바랍니다. 명령문) dtsrun /S server_name  /U user_nrame  /P password  /N package_name  /M package_password  /R repository_name 사용예) select @mat_cmd='DTSRun /S "(local)" /N "Dts이름"  /E'   exec master..xp_cmdshell @mat_cmd MS-SQL 스케줄에 등록하기 1) 작업을 추가하고 작업 유형에 운영체제명령(CmdExec)를 선택한다. 2) 명령에 DTSRun /~로컬패키지코드 MSDN에 나와있는 dtsrun 실행하는 방법) dtsrun 유틸리티 dtsrun 유틸리티는 데이터 변환 서비스(DTS)를 사용하여 만들어진 패키지를 실행합니다. Microsoft® SQL Server™ msdb 데이터베이스, COM 구조 저장소 파일 또는 SQL Server 메타데이터 서비스에 DTS 패키지를 저장할 수 있습니다. 구문 dtsrun  [/?] | [     [         /[~]S server_name[\instance_name]          { {/[~]U user_name [/[~]P password]} | /E }     ]   ...
자세한 내용 보기

[MS SQL] SP수행 시간 및 작업빈도 확인

SQL 2008 에서   제공하는 sys . dm_exec_procedure_stats, sys . dm_exec_sql_text, sys . dm_exec_query_plan 를   통해   시스템에서   가장   많이   사용하는   것과   읽기 / 쓰기를   많이   하는  SP 를   추적하여 성능   모니터링에   이용할   수   있다 . 주석으로   되어   있는   부분을   적절히   풀어서   필요에   맞게   수정하여   사용   가능 . ALTER   PROCEDURE  SP_CHECK_FRQ     @EXE_COUNT  INT = 100 ,     @WORK_TIME  float = 50 ,     @WRITE_COUNT  INT = 1 AS BEGIN -- SP_CHECK_FRQ 10,50,1      SELECT   *      FROM  ( select              DB_NAME ( qt . dbid )   as   'DB 명 ' ,              OBJECT_NAME ( qt . objectid ,  qt . dbid )   as...
자세한 내용 보기

Slug가 뭘까?

IT와 관련된 글을 읽다보니 slug라는 말을 자주 보게 되는데 뜻이 뭔지 궁금해서 찾아보게 되었다. 인터넷으로 찾아보니 제일 먼저 보이는게 아래 2개 단어이다. 1) 슬러그는 야드파운드법의 중력단위계에 속하며 질량의 단위이다 2) 민달팽이 민달팽이는 가끔 영어를 보다보면 나와서 그런가 했는데, IT 용어는 아닌것 같아 더 검색을 해보니 인터넷 용어중에 하나로 위키피디어에서 시맨틱 URL을 정의하는 말 중에 다음과 같이 정의하고 있다. 첫줄에 보면 사람이 읽을수 있는 키워드를 사용해서 URL의 한 부분을 slug라고 한다. 지금 사용하고 있는 블로그도 일종의 slug를 이용한 주소체계를 갖추고 있다고 볼 수 있다. 아래는 위키피디어 본문. http://en.wikipedia.org/wiki/Semantic_URL Slug [ edit ] Some systems define a  slug  as the part of a URL which identifies a page using  human-readable  keywords. [4] [5]  It is usually the end part of the URL, which can be interpreted as the name of the resource, similar to the basename in a  filename  or the title of a page. The name is based on the use of the word  slug  in the news media to indicate a short name given to an article for internal use. Slugs are typically generated automatically from a page title but can also be entered or altered manually, so that...
자세한 내용 보기