오디오를 재생하는 버튼에 문제가 발생합니다. #577

kammaii · 2019-01-14T16:32:48Z

해결하고자 하는 문제

안녕하세요?
버튼을 터치하면 해당 변수의 오디오가 재생 되는 코드를 만들었습니다.
그런데 처음 페이지가 로드 되었을 때 다른 액션 없이 버튼을 가장 먼저 터치하면
'Uncaught (in promise) DOMException'
이런 에러가 발생합니다.
하지만 다시 버튼을 터치하면 잘 작동합니다.

그런데 더 이상한 점은...
똑같이 페이지 로드 후 가장 먼저 터치했는데 가끔 작동하는 경우도 있습니다.
이건 어떤 경우인가요??

코드 혹은 오류

<body>
   <button type="button" class="button" ontouchstart="audioPlay()">Listening</button>
</body>

<script>
    function audioPlay() {
      if(currentSound) {
        currentSound.pause();
        currentSound.currentTime = 0;
      }
      currentSound = new Audio('audio/consonant/'+consonantArray[countClick]+'.mp3');
      currentSound.play()
    }
</script>

환경

javascript

The text was updated successfully, but these errors were encountered:

yoobato · 2019-01-15T05:48:06Z

음, 제가 해보았을 때는 문제가 발생하지 않았는데, 혹시 다른 코드가 있나요?

아래 코드로 한 번 다시 해보시겠어요?

<!DOCTYPE html>
<html>
<body>
  <button type="button" class="button" onclick="audioPlay();" ontouchstart="audioPlay();">Listening</button>

  <script>
    var currentSound = undefined;
    
    function audioPlay() {
      if(currentSound) {
        currentSound.pause();
        currentSound.currentTime = 0;
      }

      // TODO: mp3 파일 경로는 맞게 수정해주세요!
      currentSound = new Audio('hello.mp3');
      currentSound.play()
    }
  </script>
</body>
</html>

kammaii · 2019-01-15T07:38:30Z

음, 제가 해보았을 때는 문제가 발생하지 않았는데, 혹시 다른 코드가 있나요?
아래 코드로 한 번 다시 해보시겠어요?
<!DOCTYPE html>
<html>
<body>
  <button type="button" class="button" onclick="audioPlay();" ontouchstart="audioPlay();">Listening</button>

  <script>
    var currentSound = undefined;
    
    function audioPlay() {
      if(currentSound) {
        currentSound.pause();
        currentSound.currentTime = 0;
      }

      // TODO: mp3 파일 경로는 맞게 수정해주세요!
      currentSound = new Audio('hello.mp3');
      currentSound.play()
    }
  </script>
</body>
</html>
코드 수정해봤는데 그대로 입니다. ㅜ.ㅜ
문제 상황을 좀 더 설명 드리자면, 에러가 발생했을 때 에러 발생 부위를 클릭해 보면 currentSound.play() 의 play() 부분에 빨간줄이 그어져 있습니다.
그리고 Chrome에서는 가끔 작동하는데 nodejs로 만든 서버를 작동하여 핸드폰에서 페이지를 열면 100% 작동하지 않습니다. (즉, 페이지를 연 후 첫번째 클릭에는 반응이 없고 두번째 클릭에 작동을 합니다.)

yoobato · 2019-01-15T09:20:30Z

혹시 <script></script>의 위치가 어디에 있나요? <head></head>안에 있나요? 아니면, <body></body> 안에 있나요?

kammaii · 2019-01-15T10:30:42Z

혹시 <script></script>의 위치가 어디에 있나요? <head></head>안에 있나요? 아니면, <body></body> 안에 있나요?

studroid · 2019-01-15T14:12:55Z

오디오 파일이 로딩 중인 상태에서, 로딩이 완료되기 전 play를 실행하는 것이 문제가 되는 것 같습니다.
오디오 파일을 할당하는 것이 실제 로딩과 비동기적으로 일어나기 때문에 헷갈릴 수 있는 부분이네요 :)

아래 링크들에서 이에 대한 일반적인 해결책을 확인해보실 수 있습니다.

https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

http://jktester.tistory.com/29

kammaii · 2019-01-15T15:29:36Z

오디오 파일이 로딩 중인 상태에서, 로딩이 완료되기 전 play를 실행하는 것이 문제가 되는 것 같습니다.
오디오 파일을 할당하는 것이 실제 로딩과 비동기적으로 일어나기 때문에 헷갈릴 수 있는 부분이네요 :)

아래 링크들에서 이에 대한 일반적인 해결책을 확인해보실 수 있습니다.

https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

http://jktester.tistory.com/29

아! 그래서 가끔 되다 안되다 했던 것이었군요!
감사합니다! :)

yoobato added the JavaScript label Jan 15, 2019

kammaii closed this as completed Jan 15, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

오디오를 재생하는 버튼에 문제가 발생합니다. #577

오디오를 재생하는 버튼에 문제가 발생합니다. #577

kammaii commented Jan 14, 2019

yoobato commented Jan 15, 2019

kammaii commented Jan 15, 2019 •

edited

Loading

yoobato commented Jan 15, 2019

kammaii commented Jan 15, 2019

studroid commented Jan 15, 2019

kammaii commented Jan 15, 2019

오디오를 재생하는 버튼에 문제가 발생합니다. #577

오디오를 재생하는 버튼에 문제가 발생합니다. #577

Comments

kammaii commented Jan 14, 2019

해결하고자 하는 문제

코드 혹은 오류

환경

yoobato commented Jan 15, 2019

kammaii commented Jan 15, 2019 • edited Loading

yoobato commented Jan 15, 2019

kammaii commented Jan 15, 2019

studroid commented Jan 15, 2019

kammaii commented Jan 15, 2019

kammaii commented Jan 15, 2019 •

edited

Loading