如何在hugo生成的网页中插入嵌入式音乐
缘起
在我发布了在网页中嵌入视频的视频后，有网友问如何插入音乐文件并自动播放。就有了这个视频。
定义Shortcode
以 https://music.163.com/#/song?id=1304708603 为例：
先分析一下嵌入代码的格式
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1304708603&auto=1&height=66"></iframe>
定义 shortcode 代码
<iframe
frameborder="0" border="1"
marginwidth="0" marginheight="0"
width=333 height=77
src="//music.163.com/outchain/player?type=2&id={{.Get 0 }}&auto=1&height=66"
>
到这一步，实现和插入视频的方式是一致的。但是尽管有 auto=1 这个参数，但由于目前浏览器的各类限制，自动播放这个功能是不能实现的。
实现自动播放
使用javascript方式实现自动播放，这个方便也是参考了：
html背景音乐自动播放怎么实现？ - 墨语的回答 - 知乎 https://www.zhihu.com/question/472325267/answer/1999266585
进行相应的修改后的shortcode代码
<audio id="music1" controls autoplay="autoplay" loop="loop" preload="auto">
<source src="http://music.163.com/song/media/outer/url?id={{.Get 0 }}.mp3" type="audio/mpeg" />
</audio>
<script>
var audio = document.getElementById('music1');
$("#btn").bind(
"touchstart", function bf() {
if(audio !== null) {
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//alert(audio.paused);
if(audio.paused) {
audio.play(); //audio.play();// 这个就是播放
$("#btn").addClass("active")
} else {
audio.pause(); // 这个就是暂停
$("#btn").removeClass("active")
}
}
})
</script>
使用
下面的2个音乐第一个是直接使用了网易云音乐的分享代码，第二个是会自动播放的代码。