라디오 배포(Audio Player) 방법

streampack의 전중입니다.
개요
본사의 서비스는 오픈소스 Video JS를 사용합니다.영상 발표에서 실질적인 성과가 있었지만 이번에는 라디오 발표의 방법이다.다만 HTML5 플레이어는 오디오 파일이 브라우저에 따라 지원되지 않기 때문에 다양한 OS와 브라우저가 지원하는 애플이 제공하는 HLS(HTTP Live Streaming)로 변환해 비디오JS 플레이어를 사용한다.
이것은 당시의 절차다.
변환 파일 준비
이번에는 Amazon Elastic Transcoder를 사용합니다.FFmpeg 및 Bento4를 사용할 수도 있습니다.
로컬 작업 시:
https://qiita.com/khagi/items/6e8c8d10c77bee53487b
기본적으로 Audio HLS의 사전 설정을 결정하고 작업을 던지면 변환 파일이 s3으로 출력됩니다.
Audio HLS 사전 설정이 있으므로 기본 System preset: HLS Audio-160k를 사용합니다.
기본 사전 설정

작업 작성

사전 준비가 필요하다.s3bucket의 입력과 출력 구간에 로그인합니다.
Input Key:s3에 배치된 Audio 파일을 지정합니다.
지정된 Output key Prefix에서 playlist를 사용합니다.m3u8의 이름으로 출력합니다.
유저 준비
다음 내용을 준비하고poster와sourcesrc(audio 파일 경로)를 고칩니다.
player.html

<head>
    <title>Audio Player</title>
    <meta charset="UTF-8">
    <link href="//cdnjs.cloudflare.com/ajax/libs/video.js/5.19.1/video-js.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/5.19.1/video.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.5.0/videojs-contrib-hls.js"></script>
</head>

<body>
    <h1>Audio</h1>
    <audio id="content_video" class="video-js vjs-default-skin" width="640" height="360" preload="none" poster="//s3 domain/poster.jpg" playsinline controls>
        <source src="//s3 domain/hls/xxx.m3u8" type="application/x-mpegURL">
    </audio>
    <script>
      var player = videojs('content_video');
    </script>
</body>

포스터에 미리 보기 그림을 설정하면 유저가 포스터를 표시한 상태에서 재생할 수 있습니다.
결론
HLS 파일과 Video JS를 사용하면 방송 발표가 비교적 쉽다.
꼭 해보세요.

Reference

이 문제에 관하여(라디오 배포(Audio Player) 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ytanaka3/items/2b8a2c9971e53eab7f94

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

라디오 배포(Audio Player) 방법

Reference

좋은 웹페이지 즐겨찾기