Streamlit에 배경음악 넣기

Streamlit에서 기본 제공하는 음악 첨부는 다음의 링크를 참고하시면 됩니다.

 

https://docs.streamlit.io/library/api-reference/media/st.audio

Streamlit Docs

 

그러나 저는 HTML코드를 이용해서 버튼을 이용해 음악을 첨부하는 방식으로도 한번 구현해 보았습니다.

 

def set_BGM(bgm):
    if bgm:
        audio_path = f"경로/경로/{선택한음악}.mp3"
        audio_file = open(audio_path, 'rb').read()

        return st.markdown(f'<audio autoplay loop="true" src="data:audio/mp3;base64,\
                            {base64.b64encode(audio_file).decode()}"></audio>',\
                            unsafe_allow_html=True)
    else:
        st.write("잘못된 입력입니다.")
        pass

먼저 다음과 같이 BGM을 출력하는 함수를 선언해줍니다.

 

경로는 저장된 음악들의 경로를 입력해주시면 됩니다.

 

st.write(df.to_markdown(index=False))
    
    bgms = ["도원경_빛을되찾은사계", "나린","도원경", "차원의균열", "첫번째동행", "에오스탑외부", "오시리아대륙항해", "아쿠아리움필드",
                "오디움_신의창", "강림_괴력난신" , "아델의맹세", "아쉴롬_일리움", "악몽의시계탑", "시간의신전"]
    bgm = st.selectbox("🔈원하시는 배경음악을 골라주세요", bgms)
    st.write("음악은 다른 기능을 사용하면 정지됩니다.")
    # set_BGM(bgm)
    col3, col4 = st.columns(2)
    with col3:
        st.write("Play")
        if st.button("▶"):
            st.success("음악 재생")
            set_BGM(bgm)
    with col4:
        st.write("Stop")
        if st.button("⬛"):
            st.warning("음악 정지")
            pass

저는 메이플 스토리를 좋아해서 배경음악들을 저장해두고 듣곤 합니다.

 

메이플스토리 배경음악을 저장소에 저장하고, mp3파일과 streamlit의 selectbox 내의 이름을 동일하게 작성해 줍니다.

 

col3, col4는 음악 재생과 음악 정지를  2열로 배치하려고 사용한 코드입니다.

만약 2열이 아닌 2행으로 배치하고 싶으시면 col을 사용하지 않고 코드를 입력하시면 됩니다.

 

버튼의 아이콘 또한 다른 이모지나 텍스트로 바꾸고 싶으시면 원하시는대로 커스텀 하시면 됩니다.

 

구현하면 다음과 같이 나타나게 됩니다.

 

음악을 재생하고 싶으면 play버튼을, 멈추고 싶으면 stop 버튼을 누르면 됩니다.

 

2열이 아닌, 2행으로 만들고 싶으시면 다음과 같이 입력하시면 됩니다.

 

st.write(df.to_markdown(index=False))
    bgms = ["나린","도원경", "차원의균열", "첫번째동행", "에오스탑외부", "오시리아대륙항해", "아쿠아리움필드",
                "오디움_신의창", "강림_괴력난신" , "아델의맹세", "아쉴롬_일리움", "악몽의시계탑", "시간의신전"]
    bgm = st.selectbox("🔈원하시는 배경음악을 골라주세용", bgms)
    st.write("음악은 다른 기능을 사용하면 정지됩니다.")
    st.write("Play")
    if st.button("▶"):
        st.success("음악 재생")
        set_BGM(bgm)
    st.write("Stop")
    if st.button("⬛"):
        st.warning("음악 정지")
        pass

그러면 다음과 같이 나타납니다.

 

 

멈추지 않고 계속 재생되게 하고 싶었지만

streamlit 특성상, 다른 페이지로 이동하거나 input등의 기능을 이용하면 코드 자체가 새로 고침 되면서 음악이 멈추는 것으로 생각이 됩니다.

 

간편하게 페이지에 음악을 첨부하는 방법을 알아보았습니다