How to control APLayer?

[SHDocter]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

aplayer_js = "https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"
aplayer_css = "https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css"

ui.add_head_html(f'''
    <link rel="stylesheet" href="{aplayer_css}">
    <script src="{aplayer_js}"></script>
''')

music_data = [
    {
        "name": "歌曲1",
        "artist": "歌手1",
        "url": "https://music.163.com/song/media/outer/url?id=490602354.mp3",
        "cover": "https://p1.music.126.net/xxxx.jpg"
    },
    {
        "name": "歌曲2",
        "artist": "歌手2",
        "url": "https://music.163.com/song/media/outer/url?id=1359356908.mp3",
        "cover": "https://p1.music.126.net/xxxx.jpg"
    }
]

ui.add_body_html(f'''
    <div id="aplayer"></div>
    <script>
        const ap = new APlayer({{
            container: document.getElementById('aplayer'),
            audio: {music_data}
        }});
    </script>
''')

ui.run()

Description

How to use the API of APLayer?

For example, using:

ap.play()
ap.pause()

ap.list.add([{
    name: 'name',
    artist: 'artist',
    url: 'url.mp3',
    cover: 'cover.jpg',
    lrc: 'lrc.lrc',
    theme: '#ebd0c2'
}]);

NiceGUI Version

2.15.0

Python Version

3.11.5

Browser

Chrome, Firefox

Operating System

Windows

Additional Context

No response

[evnchn]

@SHDocter Thank you.

Use ui.run_javascript to run JavaScript and invoke the JavaScript API of APlayer.

But you need to do the following:

• Put the APlayer instance in the window (I think) for the other scripts to access it.
• Use the@ui.page page decorator for ui.run_javascript to work properly as of now.

from nicegui import ui

aplayer_js = "https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"
aplayer_css = "https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css"

@ui.page("/")
def main_page():
    ui.add_head_html(f'''
        <link rel="stylesheet" href="{aplayer_css}">
        <script src="{aplayer_js}"></script>
    ''')

    music_data = [
        {
            "name": "歌曲1",
            "artist": "歌手1",
            "url": "https://music.163.com/song/media/outer/url?id=490602354.mp3",
            "cover": "https://p1.music.126.net/xxxx.jpg"
        },
        {
            "name": "歌曲2",
            "artist": "歌手2",
            "url": "https://music.163.com/song/media/outer/url?id=1359356908.mp3",
            "cover": "https://p1.music.126.net/xxxx.jpg"
        }
    ]

    ui.add_body_html(f'''
        <div id="aplayer"></div>
        <script>
            window.my_ap = new APlayer({{
                container: document.getElementById('aplayer'),
                audio: {music_data}
            }});
        </script>
    ''')

    # for ap.play()
    ui.button("Play", on_click=lambda: ui.run_javascript("my_ap.play()"))
    # for ap.pause()
    ui.button("Pause", on_click=lambda: ui.run_javascript("my_ap.pause()"))

ui.run()

[SHDocter]

What should I do if the button and player are not on the same page?

It seems that different pages cannot access the window.

In my program, the "/" page is in native mode and the "/player" page is a web page, so they are not in the same browser.

from nicegui import ui

aplayer_js = "https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"
aplayer_css = "https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css"

@ui.page("/player")
def main_page():
    ui.add_head_html(f'''
        <link rel="stylesheet" href="{aplayer_css}">
        <script src="{aplayer_js}"></script>
    ''')

    music_data = [
        {
            "name": "歌曲1",
            "artist": "歌手1",
            "url": "https://music.163.com/song/media/outer/url?id=490602354.mp3",
            "cover": "https://p1.music.126.net/xxxx.jpg"
        },
        {
            "name": "歌曲2",
            "artist": "歌手2",
            "url": "https://music.163.com/song/media/outer/url?id=1359356908.mp3",
            "cover": "https://p1.music.126.net/xxxx.jpg"
        }
    ]

    ui.add_body_html(f'''
        <div id="aplayer"></div>
        <script>
            window.my_ap = new APlayer({{
                container: document.getElementById('aplayer'),
                audio: {music_data}
            }});
        </script>
    ''')

@ui.page("/")
def index():
    # for ap.play()
    ui.button("Play", on_click=lambda: ui.run_javascript("my_ap.play()"))
    # for ap.pause()
    ui.button("Pause", on_click=lambda: ui.run_javascript("my_ap.pause()"))

ui.run()

[SHDocter]

I think I have found a way, thank you!