树莓派语音合成并播放服务,调用百度tts接口并通过mplayer播放。其他服务调用接口即可播放声音。

index.html 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  5. <title>flv.js demo</title>
  6. <style>
  7. .mainContainer {
  8. display: block;
  9. width: 1024px;
  10. margin-left: auto;
  11. margin-right: auto;
  12. }
  13. .urlInput {
  14. display: block;
  15. width: 100%;
  16. margin-left: auto;
  17. margin-right: auto;
  18. margin-top: 8px;
  19. margin-bottom: 8px;
  20. }
  21. .centeredVideo {
  22. display: block;
  23. width: 100%;
  24. height: 576px;
  25. margin-left: auto;
  26. margin-right: auto;
  27. margin-bottom: auto;
  28. }
  29. .controls {
  30. display: block;
  31. width: 100%;
  32. text-align: left;
  33. margin-left: auto;
  34. margin-right: auto;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="mainContainer">
  40. <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
  41. </div>
  42. <br>
  43. <div class="controls">
  44. <!--<button onclick="flv_load()">加载</button>-->
  45. <button onclick="flv_start()">开始</button>
  46. <button onclick="flv_pause()">暂停</button>
  47. <button onclick="flv_destroy()">停止</button>
  48. <input style="width:100px" type="text" name="seekpoint" />
  49. <button onclick="flv_seekto()">跳转</button>
  50. </div>
  51. <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
  52. <script>
  53. var player = document.getElementById('videoElement');
  54. if (flvjs.isSupported()) {
  55. var flvPlayer = flvjs.createPlayer({
  56. type: 'flv',
  57. url: 'http://chenqinghe.com:7001/live/movie.flv'
  58. });
  59. flvPlayer.attachMediaElement(videoElement);
  60. flvPlayer.load(); //加载
  61. }
  62. function flv_start() {
  63. player.play();
  64. }
  65. function flv_pause() {
  66. player.pause();
  67. }
  68. function flv_destroy() {
  69. player.pause();
  70. player.unload();
  71. player.detachMediaElement();
  72. player.destroy();
  73. player = null;
  74. }
  75. function flv_seekto() {
  76. player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
  77. }
  78. </script>
  79. </body>
  80. </html>