I want that, in my website, when I click on a timecode (e.g: 1.26), it recall the audio player at this start time and play the audio.
Steps to reproduce
Here is the parse of my code of the current audio playing solution:
strmlt.subheader("Audio file")
audio=strmlt.file_uploader("Download an audio file (format wav)",type="wav")
#getting the audio file
if(audio is not None):
strmlt.subheader("Transcription")
audio_file=audio.read()
#readable audio
strmlt.caption("Listen to the call")
strmlt.audio(audio_file,format='audio/wav', start_time=60)
#audio player
@dataprofessor Hi, indeed, Iâve already saw this, the problem is that I donât know how to change dynamically the states of the player (from starting to 1min, to starting at 20s for example, by clicking on a text)
Perhaps you can experiment with the above so that clicking on a link would take us to the specific segment of the audio (using the above query parameters with start_time parameter).
@dataprofessor I donât really know how to implement this on the hyperlink provided by the time code click (highlighted in blue), with the start_time and the query experimental feature
Hi @Goyo , indeed, thatâs because I donât have implemented this yet, because I donât know how to do.
I said Hyperlink cause in french itâs called âhyperlienâ, sorry. By this name I mean the link you click and allow you to refresh one element of the website, here the audio player. For example, by clicking on the time code 00:02:800 it will play the audio on the upper player at 2,8s.
You could use an input widget to allow the user to select when to start playing, like this:
import streamlit as st
st.subheader("Audio file")
audio = st.file_uploader("Download an audio file (format wav)", type="wav")
# getting the audio file
if audio is not None:
st.subheader("Transcription")
audio_file = audio.read()
# readable audio
# st.caption("Listen to the call")
if st.button("Play from start"):
st.audio(audio_file, format="audio/wav")
if st.button("Play from 10 seconds"):
st.audio(audio_file, format="audio/wav", start_time=10)
if st.button("Play from 20 seconds"):
st.audio(audio_file, format="audio/wav", start_time=20)
Oh thank you @blackary . Unfortunately, itâs not really what iâm serching for. Indeed, my goal is to enable a link on the text that refresh the player at the selected timecode.
What about styling buttons to look like links, like this?
import streamlit as st
from streamlit_extras.stylable_container import stylable_container
st.subheader("Audio file")
audio = st.file_uploader("Download an audio file (format wav)", type="wav")
if "start_time" not in st.session_state:
st.session_state.start_time = 0
# Style buttons as links
with stylable_container(
key="link_buttons",
css_styles="""
button {
background: none!important;
border: none;
padding: 0!important;
font-family: arial, sans-serif;
color: #069;
text-decoration: underline;
cursor: pointer;
}
""",
):
# getting the audio file
if audio is not None:
st.subheader("Transcription")
audio_file = audio.read()
for time in range(0, 60, 10):
start = time
end = time + 10
range = f"00:{start:02} - 00:{end}"
if st.button(range):
st.session_state["start_time"] = start
st.experimental_rerun()
st.audio(audio_file, format="audio/wav", start_time=st.session_state.start_time)
split each line into two columns, e.g.: timestamp | content
create a dataframe to use with st.table(df) with proper styling.
Assuming the table is responsive, write a row_clicked callback, e.g. on row_clicked, retrieve the index, parse the 1st portion of the timestamp, convert to seconds â new start time.
Hope this helps!
UPDATE
I tried providing an example of my proposed implementation, but I was assuming too much about streamlit.
Streamlitâs âelementsâ are not (all) widgets. I was assuming that st.dataframe or st.edit_data would have an on_click property (st.edit_data can have a callback but only for the âon changeâ event!).
I am confused: In the screenshot of your original post, the timestamps look like
00:00.800 --> 00:01.800 ...
Since they come from a text file, they need to be parsed and converted to decimal seconds to be useable by the audio widget. Now, with your new âraw textsâ, it seems you have already converted them (yet they are still not useable as is).
Which is the real raw format?
PS: The proposal from @backary seem viable. Have you tried it? Please let the community knows, thank you.
