Mdx播放音频最理想的html形式是什么

技术交流与词典编修
1

如题，见过千奇百怪各种各样的写法，几乎一个词典一个样，兼容性也各不相同，希望大家能讨论一些简洁、优雅、泛用、高兼容性的写法？

3 Likes
2

MDict 文档里的写法：

<a href="sound://test.mp3">hello</a>
3

没错，这个是很好的答案，但想到是mdict自创的，用在普通网页是不行的，心里总是感觉怪怪的。
如果要加入发音图标呢？
如果要同时实现在线发音和离线发音切换呢？
html结合css以及js怎么写会比较优雅？方便这些功能的实现。

4

个人抛砖引玉一下

有发音图标，最简洁的在线发音带图标是<a href="网址"><img src=""></a>

不使用mdict文档的写法，最简洁的离线发音带图标是

<script>
function _PlayAudio(audioUrl) {
    var audio = new Audio(audioUrl);
    audio.play();
}
</script>
<style>
a.sound:after {
    content: '🔊'; 
}
</style>
<a href="javascript:void(0)" onclick="_PlayAudio('音频路径')" class="sound"></a>
5

带图标以及离线在线发音切换：

<a
    href="sound://test.mp3"
    remote-href="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
    onclick="play(event);"
    ><img src="speaker.png"
/></a>

function play(e) {
    e.preventDefault();
    e.stopPropagation();

    var ele = e.currentTarget;
    var href = ele.getAttribute("href");
    var remote_href = ele.getAttribute("remote-href");

    var mp3 = new Audio();
    mp3.src = href;
    mp3.play().catch(function (err) {
        var mp3 = new Audio();
        mp3.src = remote_href;
        mp3.play();
    });

    return false;
}

写了个小样例，供参考：

speaker.zip (10.7 KB)

2 Likes
6

学习了，很好 :yum:

7

我个人最喜欢规范方案：audio 包裹多个 source，词典软件能在点击发音按钮前加载音频，使得离线/在线体验完全一致。但 IE 内核貌似不支持这个。

<audio>
  <source src="myAudio.ogg" type="audio/ogg" />
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="https://example.com/myAudio.ogg" type="audio/ogg" />
  <source src="https://example.com/myAudio.mp3" type="audio/mpeg" />
</audio>
1 Like
8

我也挺喜欢audio，确实很方便和规范，就是控件有点影响观感，老兄分享下自己的美观写法？

9

如果你没有声明 controls 属性，音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 HTMLMediaElementAPI 创建自己的自定义控件。

牛外英汉汉英词典用的就是无 controls 的 audio 标签（内有3个 source），只简单地实现了点击-发音-按钮转圈功能。

1 Like
10

嗯，隐藏控件后实现播放的方法千千万万，自定义控件更是灵活和复杂，你的方案很好。

11

带图标以及离线在线发音切换，附加支持盲人读屏器：

<a
    href="sound://test.mp3"
    remote-href="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
    onclick="play(event);"
    role="region"
    aria-label="audio player"
    ><img src="speaker.png"
/></a>
2 Likes