如何使用PyScript播放mp3文件？

Question

我想使用 HTML 标签播放 mp3 文件，如下所示：

    <audio controls>
      <source id="player" src="sounds//ziege.mp3" type="audio/mpeg">
    </audio>

通过播放器 UI 播放 mp3 文件当然可以，但在 PyScript 中不行：

    <button py-click="play">Play</button>
    <button py-click="pause">Pause</button>
    <button py-click="stop">Stop</button>
    
    <script type="py">
        from pyscript import document, display
        from pyweb import pydom
        from pyodide.ffi import to_js

        # probably not necessary - does not work without the conversion either
        sound = to_js(pydom["#player"][0])
        display(sound)

        def play(event):
            display(sound)
            sound.play()

        def pause(event):
            sound.pause()
            
        def stop(event):
            sound.stop()
    </script>

点击任何按钮都会产生“AttributeError：play”

如何通过播放器播放 mp3 文件，或者是否存在我迄今为止忽略的 PyScript 模块？

我正在使用 PyScript 版本 3.11.3

Answer 1

当按照您尝试的方式通过 PyScript 访问时，您不能直接在 DOM 元素上使用

play()

方法。要解决这个问题，您需要使用

document.getElementById()

获取音频元素。我提供了它的更新代码。

<audio id="player" controls>
    <source src="sounds/ziege.mp3" type="audio/mpeg">
</audio>

<button py-click="play">Play</button>
<button py-click="pause">Pause</button>
<button py-click="stop">Stop</button>

<script type="py">
    from pyscript import document, display
    from pyweb import pydom
    from pyodide.ffi import to_js

    // Here, get emement using getElementById
    sound = document.getElementById("player")

    def play(event):
        sound.play()

    def pause(event):
        sound.pause()

    def stop(event):
        sound.pause()
        sound.currentTime = 0
</script>