HTML5 오디오 레이블을 사용하여 ACNH 라디오 구성

14796 단어 htmlshowdevjavascript
Cerner, 내가 현재 있는 회사는 매년 2^5라는 해커 대회를 개최하는데 32일 동안 너는 매일 32줄을 넘지 않는 코드를 제출할 수 있다.나는 이전에 dev.to에 이 블로그를 쓴 적이 있는데, 너는 이 게시물을 볼 수 있다.
나는 4년 동안 참여해 왔는데, 사람들이 32줄 코드만으로 이렇게 많은 일을 완성할 수 있다는 것은 항상 나를 놀라게 한다.올해는 내가 가장 즐겨 참여한 해이다. 왜냐하면 나의 모든 작품은 동물을 둘러싸고 새로운 시야 주제를 통과하기 때문이다.다른 수백만 명의 닌텐도 스위치 게이머들과 마찬가지로 ACNH는 나의 일상적인 치료 방법이 되었다. 왜냐하면 나는 벌레와 물고기를 잡고 화석을 발굴하여 섬을 만들었기 때문이다. 섬에는 아주 좋은 마을 사람들(최고의 마을 사람들Cherry이 살았기 때문에 나는 그녀가 있는 모든 마을 사람들이 동의할 것이라고 믿는다).
더욱 흥미로운 것은 새로운 게임을 위해 community-supported REST API를 찾았다는 것이다. 게임의 많은 항목을 조회하고 JSON의 본문 형식으로 이 항목에 대한 정보를 얻을 수 있도록 하는 것이다. 내가 제출한 this year의 거의 모든 2^5 제출은 이 무료 API를 둘러싸고 있다.
나는 의견서를 제출했지만, 이것은 나를 매우 괴롭혔다.많이요.내가 그것을 제출한 이래로, 나는 그것이 내가 꾸며낸 가장 추악한 것 중 하나라는 사실을 제외하고는 아무런 이유도 없다고 생각해 왔다.제출한 서류는 radio that plays K.K. Slider songs입니다.간단명료하게 보기 위해서, 이 파일을 Vercel here 에 배치하여, 사용자가 이 파일의 기능을 볼 수 있도록 합니다.
보시다시피, 어떤 의미에서 말하자면, 이것은 정말 시각적 흡인력이 없다.이 작업을 올바르게 수행하려면 JavaScript를 사용하여 파일을 매우 크게 만들고, 파일을 매우 아름답게 만들 시간이 부족합니다.
저는 지금 그것을 더욱 아름답게 하려고 노력하고 있습니다. 그래서 지금 HTML5의 audio 라벨이 당신을 위해 무엇을 할 수 있는지, 그리고 제가 그것을 어떻게 사용해서 작은 라디오 mvp를 만들 수 있는지 중점적으로 소개합니다!

음악 검색
우리가 토론해야 할 첫 번째 일은 우리가 재생하고 싶은 음악을 어떻게 검색할 것인가 하는 것이다.우선, 나는 노래를 찾아서 연주해야 한다.ACNH API에는 Songs endpoint 인터페이스가 있어 쉽게 사용할 수 있습니다.나는 라디오 한 대를 만들고 있기 때문에 랜덤 노래만 틀고 싶다. 그래서 나는 먼저 자바스크립트에서 1과 95 사이의 랜덤 정수를 만들 것이다.
Math.floor(Math.random() * 94) + 1
이것은 자바스크립트에서 내가 매우 싫어하는 이상한 점 중 하나이다. 다른 현대 언어와 달리 실제로는 무작위 정수를 생성할 수 있다.미국 자바스크립트 개발자는 반드시 Math.random(0.0에서 1.0 사이의 무작위 십진수 생성)과Math.floor(3.9, 3.7, 3.000001 같은 숫자를 3으로 반올림)해야 한다.ANCH API는 정수를 ID로 사용하기 때문에 현재 API에서 곡을 가져오는 유일한 방법은 이 범위 내의 ID 번호를 조회 매개 변수로 사용하는 것입니다.
const req = new XMLHttpRequest();
req.open('GET', `https://acnhapi.com/v1/songs/${Math.floor(Math.random() * 94) + 1}`);
req.onload = function () { setSong(req.response); };
req.send();
나는 이 프로젝트에서 NPM을 사용하지 않았기 때문에 XMLHttpRequest만 사용하면 나의 수요를 만족시킬 수 있다.지금... 그게 뭐야setSong 얘는 뭐 하는 거야?나는 그것으로 HTML5 audio tag 의 일부 속성을 설정했다.이 탭을 사용하면 다음 질문에 대답하는 데 도움이 될 것입니다.

음악을 연주하다audio 라벨이 음악source과 함께 제공될 때 브라우저에서 오디오를 불러온 후 브라우저에서 오디오 미디어를 재생할 수 있습니다!따라서 API 호출에서 응답을 받아 MP3 URL을 추출한 다음 재생을 시작할 수 있습니다.
<audio autoplay>
  <source type="audio/mpeg"/>Looks like your browser doesn't support audio tags :(
</audio>

function setSong(resp) {
  const json = JSON.parse(resp);
  document.querySelector('#text').textContent = json["name"]["name-USen"];
  document.querySelector('source').setAttribute('src', json["music_uri"]);
  document.querySelector('audio').load();
}
이 코드는 src 라벨의 source를 설정하고 audio 라벨이 음악 재생을 시작한다는 것을 알려주면 autoplay 라벨이 음악을 재생할 수 있도록 합니다.진일보한 토론을 하기 전에 이 코드가 실제로 어떻게 음악을 재생하는지, 그리고 왜 크롬 기반 브라우저를 사용하는지 설명하고 싶습니다. audio 속성은 노래가 예상한 대로 자동으로 재생되지 않을 수 있습니다.
내 위에 링크된 Mozilla 문서를 보면 autoplay 탭에 많은 속성이 있습니다.내가 중점적으로 토론하고 싶은 두 가지 주요 문제는 controls과autoplay이다.만약 여기에 controls 속성이 포함된다면, 많은 브라우저들이 controls를 지원할 것이다. 왜냐하면 autoplay 브라우저가 미디어에 음악 컨트롤을 제공하도록 요구하기 때문이다.이 항목에 대해 기본 컨트롤을 렌더링하고 싶지 않습니다. 이 컨트롤이 여전히 autoplay 사용할 수 있는 곳에 있기를 바랍니다. 이것이 바로 제가 이 컨트롤을 보존한 이유입니다.
그러나 Chrome는 해당 미디어의 재생/일시 정지를 제어하지 않는 미디어를 거부했습니다.따라서 사용자 작업에 따라 미디어를 재생할 수 있도록 UI에 어떤 것을 도입해야 하기 때문에 onClick 표시에 body 프로세서를 추가했습니다. 전체 결과는 다음과 같습니다.
<body onclick="document.querySelector('audio').load();" onload="loadNextSong()">
  <div class="content">
    <h2 id="text"></h2>
    <h2>Click here to start playing music.</h2>
  </div>
  <audio autoplay>
    <source type="audio/mpeg"/>Looks like your browser doesn't support audio tags :(
  </audio>
</body>
이제 페이지를 로드할 때 음악을 재생하기 위해 위치를 클릭하라는 메시지가 표시됩니다.지금 우리는 라디오 한 대를 만들고 있기 때문에, 우리가 불러온 첫 번째 노래가 멈출 때, 우리는 어떻게 다음 노래를 불러옵니까?

음악을 계속 재생하다audio 표시는 매우 편리한 이벤트 처리 프로그램을 가지고 있기 때문에 우리는 그것을 이용할 수 있다.우리는 ended 사건을 방송의 주요 장점으로 이용할 수 있다.지금까지 작성된 JavaScript는 다음과 같습니다.
function setSong(resp) {
  const json = JSON.parse(resp);
  document.querySelector('#text').textContent = json["name"]["name-USen"];
  document.querySelector('source').setAttribute('src', json["music_uri"]);
  document.querySelector('audio').load();
}
function loadNextSong() {
  document.querySelector('#text').textContent = "Loading...";
  const req = new XMLHttpRequest();
  req.open('GET', `https://acnhapi.com/v1/songs/${Math.floor(Math.random() * 94) + 1}`);
  req.onload = function () { setSong(req.response); };
  req.send();
}
다음 곡을 검색해서 웹 페이지에 불러오는 기능이 있습니다.그러나 첫 번째 무작위로 선택한 노래가 나오면 이 코드는 재생을 중지합니다.우리는 그것을 멈추게 할 수 없다.만약 그렇다면, K.K.Slider는 우리를 어떻게 생각할까?
다행히도, 우리는 오디오 라벨이 미디어에서 재생된 후에 다음 곡을 불러올 수 있다.이를 위해 ended 이벤트에 이벤트 처리 프로그램을 추가할 수 있습니다.
document.querySelector('audio').addEventListener('ended', loadNextSong);
노래가 재생되지 않을 때, 우리는 다른 곡을 조회하고, 모든 적당한 라벨을 설정한 후, document.querySelector('audio').load() 다음 곡을 재생할 것입니다!오디오 탭에 autoplay을 추가했기 때문에 사용자는 반드시 페이지 주체를 클릭해야만 재생을 시작할 수 있기 때문에 브라우저가 닫히기 전에도 크롬의 노래는 계속 재생됩니다!

결론
ACNH 라디오로서는 좋은 시작이지만 인터넷은 더욱 잘 발전해야 한다!지금까지 나는 라디오를 켜고 끄는 방법이 없었고, 그것은 정말 라디오처럼 보이지 않았다.
곧 발표될 기사를 계속 주목해 주십시오. 저는 CSS 마법을 사용해서 화면에 있는 이 텍스트를 우리가 모두 자랑스러울 수 있는 것으로 만들었습니다.그 전에 나는 네가 audio 라벨을 어떻게 사용하는지 배우는 것을 좋아하길 바란다!만약 당신이 나에게 어떤 문제나 피드백을 준다면, 나의 개인 자료에서 나의 소셜 미디어 링크를 찾을 수 있다.책을 읽어 주셔서 감사합니다. 즐겁게 읽으세요.
ecshop 바닥 저작권 삭제 및 Pow by Shop 난주 현상
JS 날짜 대상 의 브 라 우 저 간 차이

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage