Giter Site home page Giter Site logo

Comments (1)

ziggy321 avatar ziggy321 commented on August 20, 2024
  1. AudioBufferSourceNode당 start 호출이 한번만 가능한 문제를 해결하였다.
    AudioBufferSourceNode를 다시 생성하여 기존의 buffer와 playbackRate.value를 넣어준다.

  2. 줌인/줌아웃 기능을 현재 구현하였다.

첫 트랙에 재생 바의 움직임을 검증하였다.
배속/감속에 따라서도 속도가 달라지는 것이 잘 반영된다.
그러나 줌인을 해보면 재생바를 움직이는 도중에 재생을 pause했을 때 재생바 위치가 다소 상이해보인다.
재생바의 위치를 실수의 덧셈으로 계산하고 있기 때문에 발생하는 부동소수점의 오차 때문으로 추측하고 있다.
이 문제를 해결해야 한다.


  1. 여러 트랙에 대해서 재생바를 보여줄 수있도록 코드구조를 수정해야 함
    모든 트랙을 한꺼번에 재생하는 기능 외에도 각 트랙에 대해서 재생 기능을 각각 제공하는 것을 고려 중

pause했을 때 부동소수점 오차 문제
=> 재생바 위치를 그 때 그 때 실행시간을 계산해서 대입해주는 방법으로 해결하였다.

배속/감속을 재생 도중에 적용할 경우 재생 바 위치가 이상해지는 문제가 있어 이를 해결해야 함


  1. 붙여넣기 시 해당 트랙에 드래그한 영역이 없으면 재생바 위치를 기준으로 붙여넣기를 수행하도록 구현하였다.
    재생바를 기준으로 붙여넣기할 때 기존 트랙의 길이를 초과하면 트랙이 확장된다.

  2. 파일 불러오기와 녹음의 기준을 재생 바로 변경할지 여부는 고려 중이다.

  3. 재생 바를 모든 트랙에 구현하였으며, 서로 매순간 위치의 속도는 동일하다.

  4. 재생 바의 속도는 가로 방향 줌 상태에만 영향을 받게 구현하였고,
    배속/감속 시에는 재생 바의 속도는 일정하되 파형이 변화하도록 구현하였다.

  5. 음악이 끝나도 재생바가 바깥으로 튀어나가던 문제가 있었고 이를 해결하였다.

  6. 줌 변화 후 영역 선택할 경우, 복사/지우기/붙이기에 줌 변화에 따른 오디오 버퍼 접근 범위가 알맞게 적용되도록 수정하였다.
    (줌값에 따른 오디오 버퍼 접근 범위를 계산)


  1. 재생바를 드래그 혹은 클릭으로 이동 가능
    재생바의 위치에 따라 현재 재생 시간을 변경하고 표시되는 시간에도 반영함

  2. 현재 재생 시간 표시를 구현하였다.

  3. 재생 중에 새 트랙을 추가하면, 빈 트랙에도 재생바는 움직인다.

  4. 재생 중에 새 음원을 로드하면 stop을 호출한다.

  5. 재생 중이지 않을 때 세로 방향 줌 값의 변화에 따른 재생바 길이 변화 적용

  6. 가로 방향 줌이 변하면 현재 재생 시간을 유지하고 재생바를 옮긴다.

  7. 재생바 드래그할 때 밖으로 튀어나갈 수 있는 문제를 해결하였다.

  8. 재생바 드래그할 때 영역 선택이 같이 되는 문제를 해결하였다.

  9. 트랙에 로드된 음원이 없을 때에도 가로방향 줌의 변화가 재생바를 움직이도록 수정하였다.

from touchsound.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.