gatsby-remark-audio란 무엇입니까?

Gatsby.js에서 markdown 파일에 오디오 파일을 넣을 수있는 플러그인
마크다운 안에 `audio: <URL>` 라고 쓰면 HTML의 <audio> 태그로 변환해준다

공식은 여기 : htps //w w. tsbyys. 오 rg / Pac 가게 s / tsby-rema rk 아우 오 /

이런 느낌이 될거야

사용법

npm 또는 yarn으로 설치

gatsby-config.js 따기

오디오 파일을 /static 디렉토리 아래에 넣기

마크다운 안에 audio: /bar.wav

1. 패키지 설치

npm 또는 yarn을 사용하여 넣습니다.
프로젝트에서 사용하는 사람들과 함께하십시오.
npm install gatsby-remark-audio또는yarn add gatsby-remark-audio

2. gatsby-config.js 놀기

이 플러그인뿐만 아니라 Gatsby.js 플러그인은 설치 한 후 gatsby-config.js를 다시 작성합니다.gatsby-config.js는 gatsby 프로젝트가있는 디렉토리의 루트 바로 아래에 있습니다 (package.json
다시 쓰는 내용은 아래와 같습니다.

plugins의 밑에

gatsby-transformer-remark의 밑에

plugins 아래

gatsby-remark-audio
gatsby-config.js

module.exports = {
  // 省略
  plugins: [
    // 省略
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-audio",
            options: {
              preload: "auto",
              loop: false,
              controls: true,
              muted: false,
              autoplay: false,
            },
          },
        ],
      },
    },
    // 省略
  ],
}

플러그인을 읽지 못하면 ↓를 꽂아보십시오.

플러그인에 플러그인이 있기 때문에 중첩을 잘못하지 않았습니까?

이미 gatsby-transformer-remark가 들어가면 ↑ 코드로 바꾼다

3. 오디오 파일 추가

/static 디렉토리 안에 직접 흩어져
넣은 후의 프로젝트의 디렉토리 구조는 이런 식으로 ↓

my-gatsby-project
┗ public
┗ src
  ┗ pages  ┗ components
  ┗ templates
  # その他ソースコード
┗ static
  ┗ foo.wav # 追加した音声ファイル
┗ package.json
┗ gatsby-config.js

4. 마크다운에서 오디오 코드 작성

쓰는 방법은`audio: <URL>`
예를 들면 ↓

# みだし

これはWAVファイルです

`audio: /foo.wav`
`audio: https://fairu-hosuto.com/hoge.mp3`

오디오를 /static 폴더에 넣으면 URL의 사촌을 /<ファイル名>로 설정
외부 사이트의 URL이라면 그대로 넣을 수 있습니다.
/static 안에 있지만 마크 다운의 파일 이름은 /로 시작하므로주의하십시오.

요약

gatsby-remark-audio 는 마크다운에서 <audio> 태그를 만들어 준다

공식 문서: htps //w w. tsbyys. 오 rg / pa c gaze s / tsby-rema rk au a /