음성 녹음기 컴포넌트

이렇게! 제가 알려드린 URL을 사용하고 있는지 꼭 확인하세요. :+1:

5개의 좋아요

여기是我的 실험 전과 실험 후 결과입니다:

(참고로, 클립의 길이를 표시하지 않는 유일한 내장 .mp3 플레이어는 Windows에서 녹음된 것입니다. 실험 전후 모두 해당됩니다.)

실험 전:

실험 후:

추가 테스트가 필요하시면 말씀해 주세요!

2개의 좋아요

아이패드와 아이폰에서, 그리고 DiscourseHub에서도 잘 작동합니다. 클립을 재생할 때 길이가 표시됩니다.

3개의 좋아요

피드백을 주셔서 감사합니다, Jakke!

또한 @denvergeeks 덕분에 두 가지 문제를 수정했고, 그는 이제 모든 것이 완벽하게 작동한다고 확인해 주었습니다.

곧 PR을 올리겠습니다. :+1:

5개의 좋아요

PR를 만들었습니다 :+1:

다른 PR에서 추가할 수 있는 기능:

  • 채팅 지원 추가
  • 일시정지/재개 지원 추가
10개의 좋아요

정말 대단하네요

3개의 좋아요

아주 대담한 아이디어 하나를 제안해 보겠습니다. 작성기에 업로드된 .mp3 오디오 파일용 AI 전사 버튼이 어떨까요? 이렇게 하면 사용자가 작성기에서 게시물을 녹음할 수 있을 뿐만 아니라, 텍스트로 읽을 수 있고 검색도 가능하게 만들 수 있습니다.

OpenAI/Whisper 기능을 포함하려면 무엇이 필요할까요?

아니면, 작성기에서 파일을 선택할 때 나타나는 AI 드롭다운 옵션에…

…
텍스트 전사 옵션을 포함할 수도 있습니다.

8개의 좋아요

흥미롭고 유용한 기능이 될 것 같습니다! :+1:

나중에 실현 가능성을 확인해 보겠습니다.

8개의 좋아요

이 부분은 정말 고맙습니다!

3개의 좋아요

채팅에 구현된다면, 인라인 자동 전사 기능에 번역도 포함될 수 있습니다.

5개의 좋아요

시스템에서 이 구성 요소를 업데이트했습니다.
https://github.com/paviliondev/discourse-voice-recorder

맥의 Firefox/Safari/Chrome과 iPhone에서 시도해 보았지만,
아래와 같은 화면이 표시되며 녹음이 되지 않습니다.
누군가 확인해 주실 수 있을까요? 감사합니다…

2개의 좋아요

에러가 보인다면 브라우저 콘솔을 확인해 주실 수 있나요?

이 시점에서 라이브러리 스크립트 로딩이 무언가에 의해 차단되고 있다는 뜻입니다.

3개의 좋아요

위에서 링크된 paviliondev 저장소에서 TC를 방금 새로 설치했습니다.

Discourse 인스턴스에서 모든 것이 정상적으로 작동합니다. 아래는 동영상입니다…

(생성/업로드/재생 단계에서 콘솔에 어떤 오류도 표시되지 않습니다.)

4개의 좋아요

이것은 communiteq에서 호스팅된 discourse 3.2.1입니다

load-script.js:43 다음 Content Security Policy 지시사항을 위반하여 스크립트 ‘https://www.mydiscoursesite.com/uploads/db9860/original/3X/c/f/cf579d0503105d41f84653929d510e17f12d9f5b.js’ 로드 거부:
“script-src
https://www.mydiscoursesite.com/logs/
https://www.mydiscoursesite.com/sidekiq/
https://www.mydiscoursesite.com/mini-profiler-resources/
https://www.mydiscoursesite.com/assets/
https://www.mydiscoursesite.com/extra-locales/
https://www.mydiscoursesite.com/highlight-js/
https://www.mydiscoursesite.com/javascripts/
https://www.mydiscoursesite.com/plugins/
https://www.mydiscoursesite.com/theme-javascripts/
https://www.mydiscoursesite.com/svg-sprite/”

2개의 좋아요

재현할 수 있습니다.

최근 도입된 설정을 통해 수동 구성 없이 외부 스크립트를 동적으로 실행할 수 있습니다.
3.2에서는 사용할 수 없습니다.

image

“/uploads” 디렉토리를 허용하는 것은 분명히 좋은 아이디어가 아닙니다.
다만, 임시 해결책으로 URL만 허용하는 것은 괜찮을 것입니다.

컴포넌트 설정으로 이동하면:

각 링크에서 마우스 오른쪽 버튼을 클릭하여 복사한 후 content security policy script-src 설정에 붙여넣을 수 있습니다.

테마 컴포넌트에서 CSP 문제를 처리하는 더 나은 방법이 있는지 모르겠습니다. :thinking:

1개의 좋아요

@Arkshine 감사합니다

콘솔에서 /uploads/ URL에 두 개의 JS 파일을 확인하고, “content security policy script src” 목록에 추가했습니다.

https://www.site.com/uploads/db9860/original/3X/c/f/cf579d0503105d41f84653929d510e17f12d9f5b.js
https://www.site.com/uploads/db9860/original/3X/a/2/a25eb4ec6c9652e57eefc81bc25c81105232369b.js

브라우저의 녹화 권한을 확인했습니다.
그런데 녹화를 시작할 때마다 다른 URL로 오류가 발생하는데, ID가 실시간으로 생성되는 것 같습니다.

https://www.site.com/8f955841-9b8b-4857-8549-ac57ee0e4517
https://www.site.com/d43014ac-e80d-4879-83a2-bd046d43a25c
…
이러한 URL을 추가해도 도움이 되지 않는데, 녹화마다 생성되는 것 같습니다… ?

1개의 좋아요

content security policy script-src에 script-src: blob:도 추가해 주실 수 있을까요?

3개의 좋아요

동작합니다. @Arkshine 님 감사합니다!

채팅에서 음성 녹음 기능이 기대됩니다 :slight_smile:

4개의 좋아요

저는 이 오류가 없었습니다. @peter.be님의 플러그인에서 content security policy script src에 blob: 항목이 필요했기 때문에 이미 해당 항목이 존재했기 때문입니다. 그리고 그 플러그인을 제거한 후에도 content security policy script src에서 blob: 항목을 삭제하지 않았기 때문에 이미 설정되어 있었던 것입니다. 아래 화면 캡처를 참고하세요…

Discourse 관리자 설정에서 승인된 확장자 목록에 mp3를 추가하는 것도 필요한가요? 이 설정도 이미 이전에 추가해 두었습니다…

3개의 좋아요

생각해 볼 점: CSP는 문제를 심각하게 일으키는 경향이 있으며, 그래서 사실상 와일드카드일 뿐인 규칙을 사용하는 것이 꽤 일반적입니다. 그렇게 되면 CSP의 본래 취지가 완전히 사라져 버리죠.

그래서 어떻게 생각하시나요?

2개의 좋아요